jQuery操作CSS樣式
-
css(name|pro|[,val|fn])方法
- 用于設(shè)置或獲取元素CSS樣式
- 格式1:
DOM元素.css("樣式名稱", "值"); - 格式2:
DOM元素.css({"樣式名稱1":"值1","樣式名稱2":"值2"});
<script>
$(function () {
$("button").click(function () {
// 1.單個(gè)樣式設(shè)置
// $("div").css("width", "100px");
// $("div").css("height", "100px");
// $("div").css("background", "red");
// 2.鏈?zhǔn)皆O(shè)置樣式
// $("div").css("width", "100px").css("height", "100px").css("background", "red");
// 3.傳入對(duì)象一次性設(shè)置樣式
$("div").css({
"width":"100px",
"height":"100px",
"background":"blue"
});
// 4.獲取指定樣式的值
console.log($("div").css("width"));
});
});
</script>
jQuery操作元素尺寸
-
width([val|fn])方法
- 設(shè)置或獲取元素寬度(相當(dāng)于獲取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.設(shè)置元素寬度(不包括padding和border)
// $(".son").width("50px");
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>獲取</button>
<button>設(shè)置</button>
</body>
</html>
-
- 設(shè)置或獲取元素寬度(相當(dāng)于獲取height屬性值)
- 用上面按鈕代碼自己寫,工作后都得靠自己,多鍛煉自學(xué)能力(如何查看文檔,如何編寫測試案例等)
-
innerHeight()/innerWidth()
- 用上面按鈕代碼自己寫,工作后都得靠自己,多鍛煉自學(xué)能力(如何查看文檔,如何編寫測試案例等)
-
outerHeight/outerWidth()
- 用上面按鈕代碼自己寫,工作后都得靠自己,多鍛煉自學(xué)能力(如何查看文檔,如何編寫測試案例等)
jQuery操作元素位置
-
offset([coordinates])
- 獲取或設(shè)置元素相對(duì)窗口的偏移位
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.獲取距離窗口的偏移位(從border開始)
alert($('.son').offset().left); // 100
});
$("button").eq(1).click(function () {
// 2.設(shè)置距離窗口的偏移位
$('.son').offset({left:10, top:10});
});
});
</script>
-
position()
- 獲取相對(duì)于它最近的具有相對(duì)位置(position:relative或position:absolute)的父級(jí)元素的距離
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.獲取匹配元素相對(duì)父元素的偏移
alert($('.son').position().left);// 50
});
$("button").eq(1).click(function () {
// 2.無效,不能設(shè)置相對(duì)定位元素的偏移位
$('.son').position({left:10, top:10})
});
});
</script>
-
scrollTop([val])
- 設(shè)置或獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移。
<!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.獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移
// alert($('.scroll').scrollTop());
// alert($('html').scrollTop());
// 兼容所有瀏覽器寫法
alert($('html').scrollTop()+$('body').scrollTop());
});
$("button").eq(1).click(function () {
// 8.設(shè)置匹配元素相對(duì)滾動(dòng)條頂部的偏移
// $('.scroll').scrollTop(100);
// $('html').scrollTop(100);
// 兼容所有瀏覽器寫法
$('html,body').scrollTop(100);
});
});
</script>
</head>
<body>
<div class="scroll">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<button>獲取</button>
<button>設(shè)置</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])
- 用上面按鈕代碼自己寫,工作后都得靠自己,多鍛煉自學(xué)能力(如何查看文檔,如何編寫測試案例等)
