您的位置:首页 > Web前端 > CSS

JS改变DOM样式的三种方式

2018-02-05 20:16 405 查看
方法一: 

最简单也是最直接的方法就是直接修改DomNode的style属性: 

如下面的代码`

var node = document.getElementById('node');
node.style.color = 'red'

方式二: 

因为表现应该是表现层的也就是css所所的事,所以可以这样代码如下:

var node = document.getElementById('node');
node.className = 'testStyle'

方法三: 

上面两个方式都不适用于批量处理;接下来是第三种代码如下

<script type="text/javascript">
//创建一个结点,把传入的参数当作样式
function addStyleNode(str){
var styleNode = document.createElement('style');
styleNode.type  = 'text/css';
if(styleNode.styleSheet){
styleNode.styleSheet.cssText = str;//ie下要通过style.cssText进行写操作
}else{
styleNode.innHTML = str;//firefox可以直接对innHTML进行操作
}
document.getElementsByTagName('head')[0].appendChild(styleNode);
}
addStyleNode('span{font-size:40px;background:#000,color:#fff} #test{color:red}');
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  dom JavaScript