005-JQuery之CSS

 

CSS

  •  css(name|pro|[,val|fn]) ：访问匹配元素的样式属性

示例：

1 // 获取color样式属性的值
2 $(p).css("color");
3 // 将所有段落的字体颜色设为红色并且背景为蓝色
4 $("p").css({ color: "#ff0011", background: "blue" });

 

位置

  • offset([coordinates]) ：获取匹配元素在当前视口的相对偏移，返回的对象包含两个整型属性：top 和 left
  • position() ：获取匹配元素相对父元素的偏移，返回的对象包含两个整型属性：top 和 left
  • scrollTop([val]) ：获取匹配元素相对滚动条顶部的偏移
  • scrollLeft([val]) ：获取匹配元素相对滚动条左侧的偏移

示例：

 1 // HTML代码
 2 <p>Hello</p><p>2nd Paragraph</p>
 3 
 4 // 获取最后一个p的偏移(left:0 top:35)
 5 var offset = $("p:last").offset();
 6 alert(offset.left+" | "offset.top);
 7 
 8 // 设置p的偏移
 9 $("p:last").offset({ top: 10, left: 30 });
10 
11 // 获取最后一个p的位置(left:15 top:15)
12 var position = $("p:last").position();
13 alert(position.left+" | "+position.top);
 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>Selecter</title>
 5 
 6   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 7   <style media="screen">
 8     .box{
 9       width:3700px;
10       height:6000px;
11     }
12     .p1{
13       position: fixed;
14       left: 30px;
15       top:30px;
16     }
17   </style>
18 </head>
19 <body>
20   <div class="box">
21     <p class="p1">text</p>
22   </div>
23 
24   <script type="text/javascript">
25     $(window).scroll(function(){
26       $(".p1").text($(window).scrollTop());
27     });
28   </script>
29 </body>
View Code

 

尺寸

  •  height([val|fn]) ：获取当前元素的高度值（px）
  •  width([val|fn]) ：获取当前元素的宽度值（px）
  •  innerHeight() ：获取当前元素的内部高度，不包括边框
  •  innerWidth() ：获取当前元素的内部宽度，不包括边框
  •  outerHeight([options]) ：获取当前元素的外部高度，包括边框，如果options为true则计算边距在内
  •  outerWidth([options]) ：获取当前元素的外部宽度，包括边框，如果options为true则计算边距在内

示例：

 1  // 获取p的高度
 2 $("p").height();
 3 
 4 // 设置p的高度
 5 $("p").height(20);
 6 
 7 // 获取p的内部高度
 8 $("p").innerHeight();
 9 
10 // 获取p的外部高度
11 $("p").outerHeight(true);

 

posted @ 2017-10-19 14:11  agmj  阅读(122)  评论(0)  编辑  收藏  举报