目录
公共部分:
<script src="js/jquery-1.8.3.js"></script>
1. css()
<div></div>
$(function() {
//1.逐个设置
// $("div").css("width", "100px");
// $("div").css("height", "100px");
//2.链式设置
// 链式操作如果大于3步,建议分开
// $("div").css("width", "100px").css("height", "100px").css("background", "blue");
//3.批量设置(推荐)
$("div").css({
width: "100px",
height: "100px",
background: "blue"
});
//4.获取css样式值
$("div").css("height");
console.log($("div").css("height"));
});
2. witdh()
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background: skyblue;
border: 50px solid #000;
position: relative;
}
.son {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
$(function() {
//监听获取
$("button:eq(0)").click(function() {
//获取元素宽度
console.log($(".father").width());
});
//监听设置
$("button:eq(1)").click(function() {
//设置元素宽度
$(".father").width("500px");
});
});
height()、innerHeight()、innerWidth()、outerHeight()、outerWidth()类似与width()
3. offset()/position()
offset():获取元素距离窗口的偏移位
position():获取元素距离定位元素的偏移位
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background: skyblue;
border: 50px solid #000;
position: relative;
margin-left: 50px;
}
.son {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
$(function() {
//监听获取
$("button:eq(0)").click(function() {
console.log($(".son").offset().left); //150
console.log($(".son").position().left); //50
});
//监听设置
$("button:eq(1)").click(function() {
$(".son").offset({
left: 10
});
// position()只能获取不能设置
});
});
4. scrollTop()/scrollLeft()
* {
margin: 0;
padding: 0;
}
.scroll {
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div>
<button>获取</button>
<button>设置</button>
$(function() {
//监听获取
$("button:eq(0)").click(function() {
//获取滚动偏移位
console.log($(".scroll").scrollTop());
//获取网页滚动偏移位
//为了保证浏览器的兼容需要按照如下写法获取网页滚动偏移位
console.log($("html").scrollTop() + $("body").scrollTop());
});
//监听设置
$("button:eq(1)").click(function() {
//设置滚动偏移位
$(".scroll").scrollTop(300);
//设置网页滚动偏移位
//为了保证浏览器的兼容需要按照如下写法设置网页滚动偏移位
$("html,body").scrollTop(300);
});
});