首页 > 代码库 > jQuery代码节选(css)

jQuery代码节选(css)

CSS

1.css
<p class="p1">1</p>

$("p").css("color");
获取css属性值
$("p").css("color","red");
添加或修改值
$("p").css({color:"red",margin:"10px"});
添加或修改多个值

2.jQuery.cssHooks

3.offset()
<p class="p1">1</p>

$(‘.p1‘).offset({left:‘200‘,top:‘200‘})
设置元素对当前窗口的相对偏移量
console.log($(‘.p2‘).offset().top);
console.log($(‘.p2‘).offset().left);
获取偏移量

4.position()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

clg($(‘.li2‘).position().left)
clg($(‘.li2‘).position().top)
获取元素相对于上级元素的偏移量

5.scrollTop()
<body style="height:100px">
<div style="height:200px"></div>
</body>

console.log($(‘body‘).scrollTop())
获取body自身滚动条相对于顶部的偏移量
设置div的上级元素body的高小于它,那么为了显示div,body就会自动出现滚动条。
scrollTop()获取的是相对于自身滚动条的偏移量,而不是div的,在此,你要分辨出滚动条来源于谁,不然选错$()对象的话,获取的值永远是0.

6.scrollLeft()
<body style="width:100px">
<div style="width:200px"></div>
</body>

console.log($(‘body‘).scrollLeft())
获取body自身滚动条相对于左边的偏移量

6.width()
<div style="width:200px"></div>

console.log($("div").width());
获取元素宽度
console.log($("div").width(100));
设置元素宽度

7.height()
<div style="height:200px"></div>

console.log($("div").height());
获取元素高度
console.log($("div").height(100));
设置元素高度

8.innerWidth()
<div style="width:200px"></div>

console.log($("div").innerWidth());
获取元素内部宽度,这个宽度包括内边距
console.log($("div").innerWidth(100));
设置元素内部宽度,同上

9.innerHeight()
<div style="height:200px"></div>

console.log($("div").innerHeight());
获取元素内部高度,这个高度包括内边距
console.log($("div").innerHeight(100));
设置元素内部高度,同上

10.outerWidth()
<div style="width:200px"></div>

clg($(‘.div1‘).outerWidth(100));
设置元素外部宽度,不包括外边距
clg($(‘.div1‘).outerWidth());
获取元素外部宽度
clg($(‘.div1‘).outerWidth(true));
获取元素外部宽度,包括外边距

10.outerHeight()
<div style="height:200px"></div>

clg($(‘.div1‘).outerHeight(100));
设置元素外部高度,不包括外边距
clg($(‘.div1‘).outerHeight());
获取元素外部高度
clg($(‘.div1‘).outerHeight(true));
获取元素外部高度,包括外边距

jQuery代码节选(css)