一、CSS样式操作
CSS
css(name|pro|[,val|fn])
访问匹配元素的样式属性。
jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候),比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
name String 要访问的属性名称
name Array 一个或多个CSS属性组成的一个数组
properties Map 要设置为样式属性的名/值对
name,value String, Number 属性名,属性值
name,function(index, value) String,Function
1:属性名
2:此函数返回要设置的属性值。接受两个参数,index为元素在对象集合中的索引位置,value是原先的属性值。
位置
offset([coordinates])
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
coordinates{top,left} Object
必需。规定以像素计的 top 和 left 坐标。可能的值:
值对,比如 {top:100,left:0}
带有 top 和 left 属性的对象
function(index,coords) function 规定返回被选元素新偏移坐标的函数。
index - 可选。接受选择器的 index 位置
oldvalue - 可选。接受选择器的当前坐标
position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
scrollTop([val])
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
val String, Number 设定垂直滚动条值
scrollLeft([val])
获取匹配元素相对滚动条左侧的偏移。
此方法对可见和隐藏元素均有效。
val String, Number 设定水平滚动条值
尺寸
height([val|fn])
取得匹配元素当前计算的高度值(px)。
在 jQuery 1.2 以后可以用来获取 window 和 document 的高
val String, Number, Function 设定CSS中 'height' 的值,可以是字符串或者数字,还可以是一个函数,返回要设置的数值。函数接受两个参数,第一个参数是元素在原先集合中的索引位置,第二个参数为原先的高度。
function(index, height) String, Number, Function 返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。
width([val|fn])
取得第一个匹配元素当前计算的宽度值(px)。
在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
val String, Number, Function 设定CSS中 'width' 的值,可以是字符串或者数字,还可以是一个函数,返回要设置的数值。函数接受两个参数,第一个参数是元素在原先集合中的索引位置,第二个参数为原先的宽度。
function(index, height) String, Number, Function 返回用于设置宽度的一个函数。接收元素的索引位置和元素旧的宽度值作为参数。
innerHeight()
获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
此方法对可见和隐藏元素均有效。
innerWidth()
获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
此方法对可见和隐藏元素均有效。
outerHeight([options])
获取第一个匹配元素外部高度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
options Boolean默认值:'false' 设置为 true 时,计算边距在内。
outerWidth([options])
获取第一个匹配元素外部宽度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
options Boolean默认值:'false' 设置为 true 时,计算边距在内。
配套代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<style>
#div1 {
width: 400px;
height: 400px;
background: red;
/* overflow:hidden 可以解决外边距的塌陷 */
overflow: hidden;
position: relative;
}
/* 如果父元素位于浏览器的视口的顶部,当我们给子元素设置了上外边距,那么父元素也会有上边距的效果 */
#div2 {
width: 200px;
height: 200px;
background: yellow;
/* margin: 50px 0 0 100px; */
position: absolute;
left: 30px;
top: 50px;
}
.divx {
height: 300px;
width: 300px;
background: red;
margin-bottom: 20px;
}
#div4 {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
<div class="divx"></div>
<div class="divx"></div>
<div class="divx" id="div3"></div>
<button id="btn1">点击获取div3的顶部偏移量</button>
<div id="div4">
</div>
<script>
/*
JS操作CSS样式:
元素节点.style CSSStyleDeclaration对象
元素节点.style.样式属性名 操作标签样式
只能获取行内样式的值,但是内部和外部样式值获取不到
设置值,会成为行内样式
CSS:
css(name|pro|[,val|fn]) 获取或设置元素的样式
*/
// 原生JS获取样式和设置
/* var div1 = document.getElementById("div1");
console.log("div1的高度:"+div1.style.height);
console.log("div1的宽度:"+div1.style.width);
console.log("div1的背景:"+div1.style.background);
div1.style.width = "500px";
div1.style.background = "yellow"; */
// 获取样式值
console.log("div1的高度:" + $("#div1").css("height"));
console.log("div1的宽度:" + $("#div1").css("width"));
// background是复合属性,那么会展示出来一些默认的值
console.log("div1的背景:" + $("#div1").css("background"));
// 设置样式值
/* $("#div1").css("height","200px");
$("#div1").css("width","500px");
$("#div1").css("background","green"); */
/*
位置
offset() 获取匹配元素在当前视口的相对偏移。返回值:Object
返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
position() 获取匹配元素相对父元素的偏移。 获取position:absolute的值
scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移。
*/
var offset = $("#div2").offset();
console.log(offset.left, offset.top);
var position = $("#div2").position();
console.log(position.left, position.top);
$("#btn1").click(function () {
var topValue = $(document).scrollTop();
var interId = setInterval(function () {
if (topValue <= 0) {
clearInterval(interId)
return;
} else {
topValue -= 20;
$(document).scrollTop(topValue);
}
}, 5)
})
/*
height([val|fn]) 取得或设置匹配元素当前计算的高度值(px)。
width([val|fn]) 取得第一个匹配或设置元素当前计算的宽度值(px)。
height()/width()和css("height")/css("width")区别点在于,前者直接操作数值,后者必须带px单位
innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
innerWidth() 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
outerHeight([soptions]) 获取第一个匹配元素外部高度(默认包括补白和边框)。
outerWidth([options]) 获取第一个匹配元素外部宽度(默认包括补白和边框)。
设置为 true 时,计算外边距在内。
*/
console.log("height:", $("#div4").height());
console.log("width:", $("#div4").width());
// $("#div4").height(300);
console.log("innerHeight:", $("#div4").innerHeight());
console.log("innerWidth:", $("#div4").innerWidth());
console.log("outerHeight:", $("#div4").outerHeight());
console.log("outerHeight:", $("#div4").outerWidth());
console.log("outerHeight:", $("#div4").outerHeight(true));
console.log("outerHeight:", $("#div4").outerWidth(true));
</script>
</body>
</html>