首页 > 代码库 > 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)