如何利用JS对CSS样式进行更改
时间:2021-04-28 来源:互联网
今天PHP爱好者为您带来本文主要描述了,利用JavaScript对CSS样式中的行内样式和类样式进行更改,简化日常的操作流程,让HTML界面更加简洁。希望对大家有所帮助。
html中的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css操作</title>
<style>
.bgn-cyan{
background-color: cyan;
}
.bgn-yellow{
background-color: #ff0;
}
.border{
border:3px solid #000;
}
.bolder{
font-weight: bolder;
}
p{
}
</style>
</head>
<body>
</body>
</html>
1.行内样式
<script>
//获取p标签元素
const p=document.querySelector("p");
//验证是否获取成功
console.log(p);
p.style.color="red";
</script>
2.类样式
<script>
const p=document.querySelector("p");
//添加类样式
p.classList.add("bgn-cyan");
//添加多个类样式
p.classList.add("border","bolder");
//对于样式的移除
p.classList.remove("bolder","border");
//对样式的替换
p.classList.replace("bgn-cyan","bgn-yellow");
//对是否有这个样式进行取反
p.classList.toggle("bgn-cyan");
//原有样式("bgn-cyan")被替换过后replace("bgn-cyan","bgn-yellow") 使用toggle("bgn-cyan")无法实现
</script>
以上就是如何利用JS对CSS样式进行更改的详细内容,更多请关注php爱好者其它相关文章!
-
币安怎么开网格交易?-自动化套利策略快速上手指南 2025-07-05
-
美国对等关税缓冲期7月9日截止,特朗普拒延期限将通知加征惩罚性关税(美国关税减让表) 2025-07-05
-
币安账户被锁定怎么办?-申诉流程与账号解封方法 2025-07-05
-
-
币安怎么买空币种?-空头交易机制与操作指南 2025-07-05
-
比特币稳定在10.7万美元上方 美国参议院通过4.5万亿支出法案 2025-07-05