jQuery css,position,offset,scrollTop,scrollLeft用法:

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3.     String path = request.getContextPath();
  4.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  5. %>
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <meta charset="UTF-8">
  11. <title>b index</title>
  12. <link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
  13. <style type="text/css">
  14.     .s1{
  15.         width: 100px;
  16.         height: 100px;
  17.         background-color: pink;
  18.     }
  19.     .s2{
  20.         width: 50px;
  21.         height: 50px;
  22.         background-color: green;
  23.     }
  24. </style>
  25. </head>
  26. <body style="margin:1px;">
  27.     <div id="div001">div001</div>
  28.     <div id='div002'>div002</div>
  29.     <div id='div003' class='div003'>div003</div>
  30.     <div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
  31.         <p style="background-color:red;" mce_style="background-color:red;">
  32.         这里是文本 这里是文本 这里是文本 这里是文本 这里是文本
  33.         </p>
  34.     </div>
  35.     <div>
  36.         <button id="btn001">click me to get div001 css </button>
  37.         <button id="btn002">click me to get div css </button>
  38.         <button id="btn003">click me to use position/offset/scrollTop </button>
  39.         <button id="btn004">click me to set p scrollTop </button>
  40.     </div>
  41.     <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  42.     <script type="text/javascript" src="b/js/bootstrap.js"></script>
  43.     <script type="text/javascript" src="js/index037.js"></script>
  44. </body>
  45. </html>
  1. $(function() {
  2.     $('#btn001').click(btn001Click);
  3.     $('#btn002').click(btn002Click);
  4.     $('#btn003').click(btn003Click);
  5.     $('#btn004').click(btn004Click);
  6.     console.log('load:  ' + new Date());
  7.     setInterval("msg()", 60000);
  8. });
  9. function msg() {
  10.     console.log('msg:  ' + new Date());
  11. }
  12. function btn001Click() {
  13.     // 必须有参数，没有参数会报错：Uncaught TypeError: Cannot read property 'replace' of undefined
  14.     // var obj01=$('#btn001').css();
  15.     // console.log(obj01);
  16.     // 返回一个字符串
  17.     var obj02 = $('#btn001').css('color');
  18.     console.log(obj02);
  19.     // 返回一个对象,abc对应的值为undefined
  20.     var obj03 = $('#btn001').css([ 'color', 'background', 'abc' ]);
  21.     console.log(obj03);
  22.     var obj031 = $('#div001').css('background', 'red');
  23.     console.log(obj031);
  24.     // 因为可以连缀写下去，所以返回的是div001元素的jQuery对象；
  25.     var obj04 = $('#div001').css('width');
  26.     console.log(obj04);
  27.     $('#div001').css('height', function(i, v) {
  28.         // 这里面的i是0；
  29.         console.log(i);
  30.         console.log(v);
  31.         return parseFloat(v) * 1.2;
  32.     });
  33. }
  34. function btn002Click() {
  35.     // 会进行自己的遍历，其实所有的jQuery对象都是数组，所以就可以统一处理了；
  36.     var obj01 = $('div').css('background', 'red');
  37.     console.log(obj01);
  38.     $('div').css('height', function(i, v) {
  39.         // 这里面的i就会变化；会把所有的div元素遍历一遍；
  40.         console.log(i);
  41.         console.log(v);
  42.         return parseFloat(v) * 1.2;
  43.     });
  44. }
  45. function btn003Click() {
  46.     // 相对父元素位置，只对可见元素有效；
  47.     var obj01 = $('#div001').position();
  48.     console.log(obj01);
  49.     // 相对当前视口的位置，只对可见元素有效；
  50.     var obj02 = $('#div001').offset();
  51.     console.log(obj02);
  52.     // 获取顶部偏移；结果：0;对可见、不可见元素都是有效的；
  53.     var obj03 = $('#div001').scrollTop();
  54.     console.log(obj03);
  55.     // 进行设置，那就会返回div001的jQuery对象；设置好像不生效呀；
  56.     var obj04 = $('#div001').scrollTop(200);
  57.     console.log(obj04);
  58.     // 现在查看还是0，
  59.     var obj05 = $('#div001').scrollTop();
  60.     console.log(obj05);
  61. }
  62. function btn004Click(){
  63.     // 这个貌似无效；
  64.     var obj01=$('p').scrollTop(20);
  65.     console.log(obj01);
  66.     // 这个可以进行位置的偏移；偏移之后，其scrollTop,scrollLeft还是不变；
  67.     var obj02=obj01.offset({top:81});
  68.     console.log(obj02);
  69. }

jQuery css,position,offset,scrollTop,scrollLeft用法的更多相关文章

  1. 一句话解释jquery中offset、pageX, pageY、position、scrollTop, scrollLeft的区别

    offset   元素相对文档的偏移 pageX, pageY 事件(鼠标)相对文档的偏移 注意:文档是指document, 而不是当前窗口,是包含了滚动位置的,即滚动条的位置对这些值是不产生影响的 ...

  2. jQuery CSS 操作 - offset() 方法

    今天在一个页面需要知道jquery版本号,来决定使用什么样的方法,有以下方式可以获取到 $.fn.jquery $.prototype.jquery 这两种方式都可以获取到jquery的版本号 --- ...

  3. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  4. offset() position() scrollTop() scrollLeft()

    (1)offset:获取当前元素相对于文档的高度.只对可见元素有效. 不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 (2) position:获取元素相对于最近的一 ...

  5. jQuery方法position()与offset()区别

    参考别人写得比较明白的,红色部分为重点吧: 使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点 ...

  6. jquery 获取css position的值

      jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...

  7. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  8. jQuery css()与class()的用法

    一.css()用法:   1.设置css // css(name, value) // 修改单个样式 // name:样式名 value:样式值 $("li") .css(&quo ...

  9. jQuery CSS 的操作函数

    jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...

随机推荐

  1. Apache不能启动解决办法

    这是我这两天频繁遇到的问题.Apache服务器还真是问题少年!任何点改动都可能导致它无法使用. 原因一:80端口占用例如IIS,另外就是迅雷.我的apache服务器就是被迅雷害得无法启用! 原因二:软 ...

  2. Struts2--Action属性接收参数

    1. JSP文件调用格式: <a href="user/user!add?name=a&age=8">添加用户</a> 2. struts.xml文 ...

  3. js 中调用 Object.prototype.toString()来检测对象的类型

    1.使用toString()方法来检测对象类型 可以通过toString() 来获取每个对象的类型.为了每个对象都能通过 Object.prototype.toString() 来检测,需要以 Fun ...

  4. 在XAMPP上建立多个域名的站点

    XAMPP默认安装完毕后,站点文件默认放在/xampp/htdocs/ 文件下,并且可以通过http://localhost 进行访问.先前在测试各种程序的时候均是在/xampp/htdocs/ 文件 ...

  5. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  6. DNS相关配置文件

    我们晓得主机名对应到 IP 有两种方法,早期的方法是直接写在档案里面来对应, 后来比较新的方法则是透过 DNS 架构!那么这两种方法分别使用什么配置文件?可不可以同时存在? 若同时存在时,那个方法优先 ...

  7. Scala中function的理解

    在函数式语言中,函数是和value一样地位的一等公民,他可以作为变量,或者作为参数传递给另一个函数 ##作为变量 val f=(x:Int)=>x+1 为啥可以这样写? 由于scala是OOP, ...

  8. HUST 1601 Shepherd

    间隔小的时候dp预处理,大的时候暴力..正确做法不会... dp[i][j]表示以i为开头,间隔为j的和,递推:dp[i][j] = dp[i + j][j] + a[i] 测试数据中间隔可能是0.. ...

  9. AndroidStudio项目.gitignore文件内容

    .metadata/ *~ # files for the dex VM *.dex # Java class files *.class # generated files bin/ gen/ li ...

  10. Delphi Math里的基本函数，以及浮点数比较函数（转）

    源:Delphi Math里的基本函数,以及浮点数比较函数 Delphi里的好东西太多,多到让人觉得烦.这种感觉就是当年打游戏<英雄无敌3>,改了钱以后,有钱了每天都要造建筑,明明是好事, ...