jQuery代碼節選（css）
CSScss
1.css
<p class="p1">1</p>spa
$("p").css("color");
獲取css屬性值
$("p").css("color","red");
添加或修改值
$("p").css({color:"red",margin:"10px"});
添加或修改多個值對象
2.jQuery.cssHooksit
3.offset()
<p class="p1">1</p>io
$('.p1').offset({left:'200',top:'200'})
設置元素對當前窗口的相對偏移量
console.log($('.p2').offset().top);
console.log($('.p2').offset().left);
獲取偏移量console
4.position()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>class
clg($('.li2').position().left)
clg($('.li2').position().top)
獲取元素相對於上級元素的偏移量scroll
5.scrollTop()
<body style="height:100px">
<div style="height:200px"></div>
</body>margin
console.log($('body').scrollTop())
獲取body自身滾動條相對於頂部的偏移量
設置div的上級元素body的高小於它，那麼爲了顯示div，body就會自動出現滾動條。
scrollTop()獲取的是相對於自身滾動條的偏移量，而不是div的，在此，你要分辨出滾動條來源於誰，否則選錯$()對象的話，獲取的值永遠是0.top
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));獲取元素外部高度，包括外邊距
- 1. jQuery代碼節選（篩選）
- 2. jQuery代碼節選（事件）
- 3. 在線運行Javascript,Jquery,HTML,CSS代碼
- 4. jQuery節點選擇、操做
- 5. jQuery 全選效果實現代碼
- 6. jQuery選擇器與CSS選擇器
- 7. css選擇器和jQuery選擇器
- 8. CSS進階篇--CSS select樣式優化 含jquery代碼
- 9. JQuery 代碼
- 10. 【經常使用jQuery代碼段】checkbox全選/反選
- 更多相關文章...
- • Markdown 代碼 - Markdown 教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
-
每一个你不满意的现在，都有一个你没有努力的曾经。