通过JS修改CSS样式

通过JS修改CSS样式有两种方法：

修改某一属性的值
修改某一元素的class名，使其被别的样式修饰

修改某一属性的值

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script type="text/javascript">function changeBg(){var bgColor="";for(var i = 0;i<6;i++){bgColor += ""+Math.round(Math.random()*9);}document.body.style.backgroundColor="#"+bgColor;}document.onclick = changeBg;</script>
</head>
<body></body>
</html>

如上，通过for循环建立一个6位数字构成的字符串再加上#，形成能够作为颜色属性的字符串（颜色有一种表达方式就是这样。如：#324254），然后将这个值赋给body的样式属性background-color（JS中写法位backgroundColor），达到我们修改样式的目的

修改某一元素的class名

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script type="text/javascript">function chg(){document.getElementById("up").className="solid";}</script><style type="text/css">.solid{width: 160px;padding: 6px;text-align: center;border-right: #222 4px solid;border-top: 4px solid #ddd;border-left: 4px solid #ddd;border-bottom: 4px solid #222;background-color: #ccc;}</style>
</head>
<body><div id="up">whoami</div><input type="button" name="a" value="点击" onclick="chg();">
</body>
</html>

通过 JS，将id为“up”的元素的class名改为solid，使其被.solid样式修饰，达到我们修改样式的目的

以上两种方式能够达到我们修改元素样式的目的

希望能够帮助大家，如果有错，欢迎大家批评指正，也欢迎将不懂的地方评论出来，我们一起讨论学习

通过JS修改CSS样式相关推荐

原生Javascript/原生JS修改CSS样式的四种方式
设置style var domName = document.querySelector('#domName'); domName.style.backgroundColor = '#aaa' 设置属 ...
JS修改css样式的8种方式
从其他人的博客上看到的,感觉归纳的很棒,在这里种个草. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
html5 js 修改css样式,JavaScript修改css样式style_javascript技巧_脚本之家
一.局部改变样式分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N&quo ...
js修改html不成功,为什么这段代码中用js修改css样式中的display属性却不成功？
getByClass() 这个方法写的有问题,你这个方法目的是获取className的元素数组. var s = getByClass('li'); 但是你用的是 li,是tagName fu ...
js修改css样式属性_这个笔记《CSS样式的常见属性及值》，让菜鸟轻松学会包粽子...
常见样式属性及值字体: font -family -size -style: normal(正常)|italic(倾斜)|oblique -weight: normal|bold(粗体) 如果组合起 ...
html5 js 修改css样式,关于js改变css样式的写法
html> 浮动去空格 button { margin: 0; } /*这里clear:both,为的就是当左浮动之后,这个p不会跟着去浮动,如果设置none,那么p元素会跟着浮动*/ p { ...
JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值. document.getElementById("xx").style.xxx=xxxxx; ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
js如何修改html样式,怎么用js改变css样式？
怎么用js改变css样式?下面本篇文章给大家介绍一下使用JavaScript改变css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 怎么用js改变css样式? 1.通过 ...

通过JS修改CSS样式

修改某一属性的值

修改某一元素的class名

通过JS修改CSS样式相关推荐

最新文章

热门文章