jquery修改css中带有!important的样式属性

2025-10-09 06:18:08

1、新建一个html代码页面

jquery修改css中带有!important的样式属性

2、创建一个input按钮标签,然后给这个按钮添加一个changeBg()的点击事件

代码:<input type="button"   value="点击切换背景色" onclick="changeBg()"/>

jquery修改css中带有!important的样式属性

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>

jquery修改css中带有!important的样式属性

4、给按钮input标签添加class = "btn"

代码:<input type="button" class="btn"  value="点击切换背景色" onclick="changeBg()"/>

jquery修改css中带有!important的样式属性

5、引入jquery库,然后新建一个script标签,在这个标签里为changeBg()点击事件添加修改按钮的背景色

changeBg()修改背景色代码:

function changeBg(){

$(".btn").css("cssText", "background-color:red !important;");

}

jquery修改css中带有!important的样式属性

6、保存html代码页面后使用浏览器打开,点击按钮后发现按钮背景色被修改为红色。

jquery修改css中带有!important的样式属性

jquery修改css中带有!important的样式属性

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>

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢