1.获取css样式,行内样式和外部样式都能获取
1.获取css样式,行内样式和外部样式都能获取
获取多个样式不论行内还是行外，用数组,返回一个对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#box{width: 200px;height: 200px;border: 2px solid black;
margin: 50px auto;text-align: center;
}
button{
width: 200px;height: 50px;margin:0 auto;display: block;
}
.zxw{font-size: 30px;}
.zxw1{color: red;}
</style>
<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.获取css样式,行内样式和外部样式都能获取
$("button").click(function(){
//获取一个外部样式
var a = $("#box p").css("fontWeight");
var b = $("#box p").css("color");//获取外部样式
var c = $("#box p").css("fontSize");//获取外部样式
console.log(a);
console.log(b);
console.log(c);
//获取多个样式不论行内还是行外，用数组,返回一个对象
var d = $("#box p").css(["fontSize","color","fontWeight"]);
console.log(d);
});
})
</script>
</head>
<body>
<div id="box">
<p class="zxw zxw1" style="font-weight: 700;">我要自学网</p>
</div>
<button>点击</button>
</body>
</html>
1.获取css样式,行内样式和外部样式都能获取
设置多个样式，要用对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#box{width: 200px;height: 200px;border: 2px solid black;
margin: 50px auto;text-align: center;
}
button{
width: 200px;height: 50px;margin:0 auto;display: block;
}
.zxw{font-size: 30px;}
.zxw1{color: red;}
</style>
<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.获取css样式,行内样式和外部样式都能获取
$("button").click(function(){
//设置一个样式
//$("#box p").css("color","blue");
//设置多个样式，要用对象
$("#box p").css({
color:"blue",
fontWeight:400,
fontSize:"12px",
backgroundColor:"#ccc"
});
})
})
</script>
</head>
<body>
<div id="box">
<p class="zxw zxw1" style="font-weight: 700;">我要自学网</p>
</div>
<button>点击</button>
</body>
</html>
