JS改变DOM样式的三种方式

方法一: 
最简单也是最直接的方法就是直接修改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>

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值