一、操作样式类
// 1.给标签添加样式类
$("选择器").addClass("类名")
// 2.移除标签的样式类
$("选择器").removeClass("类名")
// 3.判断标签是否含有某个样式类
$("选择器").hasClass("类名")
// 4.如果标签包含某个样式类，就移除，否则，就添加
$("选择器").toggleClass("类名")
<!DOCTYPE html>
<html>
<head>
<title>操作样式类</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
}
.bacc{
background-color: red;
}
.border{
border: 1px solid black;
}
.black1{
background-color: black;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1. 添加一个样式类
$(".div1").addClass("bacc border");
// 2. 删除一个样式类
$(".div1").removeClass("border"); // 移除一个类
// 3. 判断是否包含某个样式类
console.log($(".div1").hasClass("border")); // false
console.log($(".div1").hasClass("bacc")); // true
// 4. 切换CSS类，如果有就移除，没有就添加
$(".div1").on("click",function() {
// body...
$(this).toggleClass("black1");
})
</script>
</body>
</html>操作样式类demo
二、操作CSS属性
// 1.获取标签CSS属性的值
$(".div1").css("backgroundColor")l
// 2.给标签CSS属性赋值
$(".div1").css("backgroundColor","red");
// 3.使用自定义对象 给标签CSS属性赋值
$(".div1").css({"backgroundColor":"green","border":"1px solid red"});操作CSS属性代码：
<!DOCTYPE html>
<html>
<head>
<title>操作CSS样式</title>
<style type="text/css">
.div1{
background-color: black;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.获取标签的属性值
console.log($(".div1").css("width"));
// 2.给标签的属性赋值
$(".div1").css("backgroundColor","red");// 将背景颜色改为红色
// 3.通过自定义对象同时赋多个值
$(".div1").css({"backgroundColor":"green","border":"1px solid red"});
</script>
</body>
</html>操作CSS属性demo
三、标签定位相关操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
示例：
<!DOCTYPE html>
<html>
<head>
<title>操作元素的位置</title>
<style type="text/css">
body{
margin: 0;
}
.div1{
background-color: red;
width: 100px;
height: 100px;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.获取匹配元素 在当前窗口的 相对偏移或设置元素位置
console.log($("div.div1").offset()); // 相对于当前的窗口，元素的偏移量
// 2.获取匹配元素相对父元素的偏移
console.log($("div.div1").position());// 他的父元素就是body
// 3.获取匹配元素相对滚动条顶部的偏移
console.log($("div.div1").scrollTop());
// 4.获取匹配元素相对滚动条左侧的偏移
console.log($("div.div1").scrollLeft());
</script>
</body>
</html>获取标签元素的position
返回顶部代码：
<!DOCTYPE html>
<html>
<head>
<title>返回顶部</title>
<style type="text/css">
.div1{
margin: 0 auto;
width: 1000px;
height: 300px;
}
.backtop{
width: 80px;
height: 80px;
text-align: center;
line-height: 50px;
font-size: 10px;
position: fixed;
bottom: 10px;
right: 10px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<button class="backtop hide">返回顶部</button>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
// body...
if ($(window).scrollTop()>100){
$(".backtop").removeClass("hide");
}else{
$(".backtop").addClass("hide");
}
})
$(".backtop").on("click",function () {
// body...
$(window).scrollTop(0);
})
</script>
</body>
</html>返回顶部示例
四、标签尺寸相关操作
height() // 获取内容的宽度
width() // 获取内同的高度
innerHeight()
innerWidth()
outerHeight() // 内容+ 两边的边框
outerWidth()
<!DOCTYPE html>
<html>
<head>
<title>操作尺寸</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
console.log($(".div1").height());
console.log($(".div1").width());
console.log($(".div1").innerHeight());
console.log($(".div1").innerWidth());
console.log($(".div1").outerHeight()); // 内容高度 + 两边边框
console.log($(".div1").outerWidth()); // 内容宽度 + 两边的边框
</script>
</body>
</html>标签尺寸相关操作
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
