jquery修改css中带有!important的样式属性
1、新建一个html代码页面
2、创建一个input按钮标签,然后给这个按钮添加一个changeBg()的点击事件
代码:<input type="button" value="点击切换背景色" onclick="changeBg()"/>
3、创建style标签,然后创建一个class类为btn用于设置按钮样式,其中按钮的背景设置background-color: #009F95 !important;
代码:
<style type="text/css">
.btn{
border:1px solid #ddd;
padding: 5px 8px;
background-color: #009F95 !important;
}
</style>
4、给按钮input标签添加class = "btn"
代码:<input type="button" class="btn" value="点击切换背景色" onclick="changeBg()"/>
5、引入jquery库,然后新建一个script标签,在这个标签里为changeBg()点击事件添加修改按钮的背景色
changeBg()修改背景色代码:
function changeBg(){
$(".btn").css("cssText", "background-color:red !important;");
}
6、保存html代码页面后使用浏览器打开,点击按钮后发现按钮背景色被修改为红色。
7、所有代码。可以直接复制所有代码,然后修改引入的jquery.js文件,保存后使用浏览器打开点击后即可看到效果。
所有代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn{
border:1px solid #ddd;
padding: 5px 8px;
background-color: #009F95 !important;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
function changeBg(){
$(".btn").css("cssText", "background-color:red !important;");
}
</script>
</head>
<body>
<input type="button" class="btn" value="点击切换背景色" onclick="changeBg()"/>
</body>
</html>