Jquery操作CSS常用方法
1.css
取得p的顏色：
$(document).ready(function(){
var p= $("p").css("color");
alert(p);
});
設置段落字體的顏色為紅色：
$(document).ready(function(){
$("p").css("color","red");
});
設置段落字體的顏色為紅色并且背景色為藍色：
$(document).ready(function(){
$("p").css({color:"red",background:"blue"});
});
<body>
<div>test1</div>
<div id="d" >test2</div>
<input type="text" value="文本框" />
<input type="submit" />
<p>p</p>
</body>
2.位置
offset() 獲取匹配元素在當前視口的相對偏移。返回的對象包含兩個整型屬性：top 和 left。此方法只對可見元素有效。
獲取p2段落的位置：
$(document).ready(function(){
var p=$("p:last");
p.html( "left: " + p.offset().left + ", top: " + p.offset().top );
});
設置p2段落的位置：
$(document).ready(function(){
$("p:last").offset({top:150,left:20});
});
position()獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性：top 和 left。
獲取第一段相對第二段的位置偏移：
$(document).ready(function(){
var p=$("p:first");
$("p:last").html("left:"+p.position().left+",top:"+p.position().top);
});
scrollTop()獲取匹配元素相對滾動條頂部的偏移
獲取第一段相對滾動條頂部的偏移
$(document).ready(function(){
var p=$("p:first");
$("p:last").text("scrollTop:"+p.scrollTop());
});
scrollLeft() 獲取匹配元素相對滾動條左側的偏移。
<body>
<div>test1</div>
<div id="d" >test2</div>
<input type="text" value="文本框" />
<p>p1</p>
<p>p2</p>
</body>
3.尺寸
height()獲取、設置元素高度,width()獲取、設置元素的寬度
$(document).ready(function(){
$("p:last").text( "p2高度為："+$("p:last").height());
});
設置p2的高度：
$(document).ready(function(){
$("p:last").height(30);
});
innerHeight()元素內部區域高度（包括補白、不包括邊框）。innerWidth（）元素內部區域寬度（包括補白、不包括邊框）。
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
});
outerHeight()獲取匹配元素外部高度（默認包括補白和邊框）。outerWidth()獲取匹配元素外部寬度（默認包括補白和邊框）。
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() );
});
總結
以上是生活随笔為你收集整理的Jquery操作CSS常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WordPress插件 Affiliat
- 下一篇： Vue之$nextTick属性