jQuery-样式相关操作
-
css(name|pro|[,val|fn]
用于设置或获取元素CSS样式
<script>
$(function () {
// 1.逐个依次设置
$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");
// 2.链式设置
// 注意点: 链式操作如果大于3步, 建议分开
$("div").css("width", "100px").css("height", "100px").css("background", "blue");
// 3.批量设置
$("div").css({
width: "100px",
height: "100px",
background: "red"
});
// 4.获取CSS样式值
console.log($("div").css("background"));;
});
</script>
jQuery操作元素尺寸
-
width([val|fn])
设置或获取元素宽度(不包括padding和border)
<script>
$(function () {
// 获取元素宽度
console.log($("div").width());;
// 设置元素宽度
$("div").width("200px");
});
</script>
-
height([val|fn])
- 设置或获取元素宽度(不包括padding和border)
<script>
$(function () {
// 获取元素高度
console.log($("div").height());;
// 设置元素高度
$("div").height("200px");
});
</script>
-
innerHeight()/innerWidth()
获取内部区域宽度/高度(包含内边距,不包含边框)
<!--
div{
width: 100px;
height: 100px;
background: red;
padding: 10px;
border: 5px solid #00a7f7;
}
-->
<script>
$(function () {
// 获取内部区域宽度
console.log($('div').innerWidth()); // 120 = 100 + 10 + 10
// 获取内部区域高度
console.log($('div').innerHeight()); // 120 = 100 + 10 + 10
});
</script>
-
outerHeight/outerWidth()
获取元素外部宽度/高度(默认包括补白和边框)
<!--
div{
width: 100px;
height: 100px;
background: red;
padding: 10px;
border: 5px solid #00a7f7;
}
-->
<script>
$(function () {
// 获取元素外部宽度
console.log($('div').outerWidth()); // 130 = 100 + 10 + 10 + 5 +5
// 获取元素外部高度
console.log($('div').innerHeight()); // 130 = 100 + 10 + 10 + 5 + 5
});
</script>
-
offset([coordinates])
设置或获取元素距离窗口的偏移位
<script>
$(function () {
// 获取元素距离窗口的左偏移位
console.log($(".son").offset().left);
// 获取元素距离窗口的上偏移位
console.log($(".son").offset().top);
// 设置元素距离窗口的偏移位
$(".son").offset({left: 10});
});
</script>
-
position()
- 获取匹配元素相对父元素的偏移位
-
position方法只能获取不能设置
<script>
$(function () {
// 获取匹配元素相对父元素的偏移位
console.log($(".son").position().left);
console.log($(".son").position().top);
});
</script>
-
scrollTop([val])/scrollLeft([val])
<script>
$(function () {
// 获取匹配元素相对滚动条顶部的偏移
console.log($(".scroll").scrollTop());
// 获取网页滚动的偏移位
console.log($("body").scrollTop()+$("html").scrollTop());
// 设置滚动的偏移位
$(".scroll").scrollTop(300);
// 设置网页滚动偏移位
$("html,body").scrollTop(300);
});
</script>
