我要评论设置style
var domname = document.queryselector('#domname');
domname.style.backgroundcolor = '#aaa'设置属性setattribute
var domname = document.queryselector('#domname');
domname.setattribute('style', 'background: #000;')设置csstext
var domname = document.queryselector('#domname');
domname.style.csstext = 'background:#000; margin:0px 2px;'设置class
重写classname以修改css样式
var domname = document.queryselector('#domname');
domname.classname = 'red';另外通过classlist已修改css样式，可以避免class被覆盖
var bottom = document.queryselector('#bottom');
bottom.classlist.add(classname); // 添加一个类名
bottom.classlist.remove(classname); // 移除一个类名
bottom.classlist.add('red')附：js修改css的实例代码
需求
点按钮，修改p标签的字体、颜色、大小
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javascript操纵css</title>
<style type="text/css">
.two{
color: rebeccapurple;
font-size: 45px;
font-family: "biz udp明朝 medium";
}
</style>
</head>
<script type="text/javascript">
//方式一：修改多个样式属性
function changecss () {
//color: blue; font‐size: 30px; font‐family: 楷体;
//得到first这个p
var p1 = document.getelementbyid("first");
//语法：元素.style.样式名=样式值;
p1.style.color = "blue";
p1.style.fontsize = "30px";
p1.style.fontfamily = "楷体";
}
//方式二：首先创建一个类样式，然后一条语句一次性修改所有的样式
function changeclass () {
var p2 = document.getelementbyid("second");
//语法：元素.classname = "类名";
p2.classname = "two";
}
</script>
<body>
<p id="first">
元素.style.样式名 = "样式值";
</p>
<p id="second">
元素.classname = "类名";
</p>
<input type="button" value="style.样式名,修改多个样式属性" onclick="changecss()"/>
<input type="button" value="classname,改变类样式" onclick="changeclass()"/>
</body>
</html>
效果
总结
到此这篇关于原生javascript/原生js修改css样式的4种方式的文章就介绍到这了,更多相关原生js修改css样式内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论