美文网首页
原生js获取元素样式

原生js获取元素样式

作者: Gino_Li | 来源:发表于2019-02-16 13:49 被阅读0次

    有时候我们要改变样式之前,需要先做条件判断,例如通过同一个按钮实现评论框的开关,这时我们就要先获取要操作的元素的CSS属性.

    获取内联样式obj.style

    <div id="comment" style="display:none;">评论框</div>
    
    var comment = document.getElementById('comment');
    console.log(comment.style.display);//none
    
    • 使用这种方式的前提是,css需要用内敛样式的方式书写

    获取外联样式或者在<style>中书写的样式getComputedStyle()

    <style>
        #light{
            display:block;
        }
    </style>
    <body>
      <input type="button" value="关"  id="btn"/>
      <p id="light">我是灯</p>
      <script>
                    document.getElementById('btn').onclick=function(){
                        var light = document.getElementById('light');
                        var btn = document.getElementById('btn');
                        var sty = window.getComputedStyle(light);
                        if(sty.display=='block'){
                            light.style.display='none';
                            btn.value='开';
                        }else{
                            light.style.display='block';
                            btn.value='关';
                        }
                    }
      </script>
    </body>
    

    如果要兼容IE6-8,需写上兼容性代码

    function getStyle(ele) {
        var style = null;
        
        if(window.getComputedStyle) {
            style = window.getComputedStyle(ele, null);
        }else{
            style = ele.currentStyle;
        }
        return style;
    }
    

    相关文章

      网友评论

          本文标题:原生js获取元素样式

          本文链接:https://www.haomeiwen.com/subject/etpbeqtx.html