//使用domObj.style来设置css:
domObj.style.backgroundColor="#000"//对应style里 background-color
domObj.style.fontSize="#000"//对应style里 font-size
//如果对这个表不太清楚可以在w3c上查一下
//但是一般有个规律就是,首单词小写 “-”后面的第一个字母大写,如:font-size 就是fontSize
如果是想更换标签的class的话,可以使用
domObj.className = "other_class"-moz-, -webkit-, -o-这些都是浏览器前缀。box-shadow才是css样式。通过js获取css的box-shadow的方法:
div
{
box-shadow: 10px 10px 5px #888888
}
js方法:
document.div[0].style.box-shadow = "12px 11px 5px #888888"
常用前缀和浏览器的对应关系如下:
Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-
css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程,css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险,同时也会出现有的浏览器厂商支持的好,有的支持的不好,所以就用厂商前缀加以区分。
PPK建议如果已成为REC或接近REC的属性,厂商如果完全实现了w3c的test case,就不用加厂商前缀,像border-radius在ie9下就不用加前缀。
JS控制css样式的几种方式
我们在js的工作学习中总会遇到一些不轻易通过style属性动态加载css样式的情况(eg:伪类的样式控制,动画的样式控制),这里总结一下js改变样式的几种方法:
1,通过style属性或者setAttribute()来更改样式
2,如果只是改变伪类(after,before)的content内容也可以这么做
3,通过更改类名来更改样式
4,那么重点来了:利用document.styleSheets我们获取到所有样式表,然后选择一个样式表通过 insertRule 来添加样式;也可以创建新的cssRules,通过addRule()来添加样式
5,动态加载样式表
如果需要更改的样式比较多,还是建议通过动态加载样式的方式来改变页面样式
本文来自PHP中文网,原文地址: https://www.php.cn/website-design-ask-479590.html 推荐视频教程:《 js基础教程 》