jQuery操作CSS樣式
-
css(name|pro|[,val|fn])方法
- 用于設置或獲取元素CSS樣式
- 格式1:
DOM元素.css("樣式名稱", "值"); - 格式2:
DOM元素.css({"樣式名稱1":"值1","樣式名稱2":"值2"});
<script>
$(function () {
$("button").click(function () {
// 1.單個樣式設置
// $("div").css("width", "100px");
// $("div").css("height", "100px");
// $("div").css("background", "red");
// 2.鏈式設置樣式
// $("div").css("width", "100px").css("height", "100px").css("background", "red");
// 3.傳入對象一次性設置樣式
$("div").css({
"width":"100px",
"height":"100px",
"background":"blue"
});
// 4.獲取指定樣式的值
console.log($("div").css("width"));
});
});
</script>
jQuery操作元素尺寸
-
width([val|fn])方法
- 設置或獲取元素寬度(相當于獲取width屬性值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-jQuery操作位置和尺寸</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 250px;
height: 250px;
background-color: red;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script src="代碼/js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.獲取元素寬度(不包括padding和border)
// alert($('.son').width());
});
$("button").eq(1).click(function () {
// 2.設置元素寬度(不包括padding和border)
// $(".son").width("50px");
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>獲取</button>
<button>設置</button>
</body>
</html>
-
- 設置或獲取元素寬度(相當于獲取height屬性值)
- 用上面按鈕代碼自己寫,工作后都得靠自己,多鍛煉自學能力(如何查看文檔,如何編寫測試案例等)
-
innerHeight()/innerWidth()
- 用上面按鈕代碼自己寫,工作后都得靠自己,多鍛煉自學能力(如何查看文檔,如何編寫測試案例等)
-
outerHeight/outerWidth()
- 用上面按鈕代碼自己寫,工作后都得靠自己,多鍛煉自學能力(如何查看文檔,如何編寫測試案例等)
jQuery操作元素位置
-
offset([coordinates])
- 獲取或設置元素相對窗口的偏移位
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.獲取距離窗口的偏移位(從border開始)
alert($('.son').offset().left); // 100
});
$("button").eq(1).click(function () {
// 2.設置距離窗口的偏移位
$('.son').offset({left:10, top:10});
});
});
</script>
-
position()
- 獲取相對于它最近的具有相對位置(position:relative或position:absolute)的父級元素的距離
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.獲取匹配元素相對父元素的偏移
alert($('.son').position().left);// 50
});
$("button").eq(1).click(function () {
// 2.無效,不能設置相對定位元素的偏移位
$('.son').position({left:10, top:10})
});
});
</script>
-
scrollTop([val])
- 設置或獲取匹配元素相對滾動條頂部的偏移。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-jQuery操作位置</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
margin-top: 100px;
margin-left: 100px;
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
</style>
<script src="代碼/js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
// 7.獲取匹配元素相對滾動條頂部的偏移
// alert($('.scroll').scrollTop());
// alert($('html').scrollTop());
// 兼容所有瀏覽器寫法
alert($('html').scrollTop()+$('body').scrollTop());
});
$("button").eq(1).click(function () {
// 8.設置匹配元素相對滾動條頂部的偏移
// $('.scroll').scrollTop(100);
// $('html').scrollTop(100);
// 兼容所有瀏覽器寫法
$('html,body').scrollTop(100);
});
});
</script>
</head>
<body>
<div class="scroll">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<button>獲取</button>
<button>設置</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
-
scrollLeft([val])
- 用上面按鈕代碼自己寫,工作后都得靠自己,多鍛煉自學能力(如何查看文檔,如何編寫測試案例等)
