【jQuery】4、jquery设置css属性

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

<p style="color:rgb(255, 0, 0)">jquery</p>

//获取color样式
$("p").css("color");	//rgb(255, 0, 0)
//设置css样式
$("p").css({ 
  "color": "#ff0011", 
  "background-color": "blue"
});
$("p").css({ 
  color: "#ff0011", 
  backgroundColor: "blue"
});

offset([coordinates]) 获取匹配元素在当前视口的相对偏移

<p>Hello</p>
<p>world</p>

//获取
var p = $("p:last");	//获取最后一个标签
var offset = p.offset();//获取top left值对象
p.html( "left: " + offset.left + ", top: " + offset.top );	//<p>Hello</p><p>left: 0, top: 35</p>
//设置
$("p:last").offset({
  top: 10, 
  left: 30
});

position() 获取匹配元素相对定位父元素的偏移

<p>Hello</p>
<p>world</p>

var p = $("p:first"); //获取第一个标签
var position = p.position();
//获取最后一个标签
$("p:last").html( "left: " + position.left + ", top: " + position.top ); //<p>Hello</p><p>left: 15, top: 15</p>

scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移
scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移

//获取到文档顶部的距离
$(":root").scrollTop()
//设置相对滚动条左侧的偏移
$("div.demo").scrollLeft(100)

height([val|fn]) 取得匹配元素当前计算的高度值(px)
innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框）
outerHeight([options]) 获取第一个匹配元素外部高度(默认包括补白和边框)

<div style="width: 10px;height: 10px;padding: 20px;border: 30px solid red;margin: 5px;"></div>

$("div").height();		 //10
$("div").innerHeight();  //50
$("div").outerHeight();  //110

width([val|fn])、innerWidth()、outerWidth([options])同理