Javascript读写CSS属性

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>脚本操作CSS</title>
        <style type="text/css">
            *{margin:0;border: none;padding: 0;}
            .box{
                position: relative;
                width:100%;
                height: 50px;
                background-color: #CCCCCC;
            }
            .box:before{
                content:'';
                position: absolute;
                left: 0;
                top: 0;
                width:100%;
                height: 10px;
                background-color: lightblue;
            }
            .shadow{
                    box-shadow: 6px 6px 6px rgba(0,0,0,0.7);
            }
            .btns{
                    position: relative;
                    margin-top: 30px;
                    width: 100%;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded',function(e){
                    // 读CSS属性
                    document.querySelector('#readCss').addEventListener('click',function(e){
                    let ele = document.querySelector('#box');
                    let styles = document.defaultView.getComputedStyle(ele,null);
                    let afterStyles = window.getComputedStyle(ele,':before');
                    console.log('div样式',`宽:${styles.width},高:${styles.height}`);
                    console.log(':before样式',`宽:${afterStyles.width},高:${afterStyles.height}`);
                },false);
                // 写CSS属性
                document.querySelector('#writeCss').addEventListener('click',function(e){
                    document.querySelector('#box').style.height = '100px';
                },false);
                // 增加CSS类
                document.querySelector('#addClass').addEventListener('click',function(e){
                    document.querySelector('#box').classList.add('shadow');
                },false);
                // 删除CSS类
                document.querySelector('#removeClass').addEventListener('click',function(e){
                    document.querySelector('#box').classList.remove('shadow');
                },false);
                // 切换CSS类
                document.querySelector('#toggleClass').addEventListener('click',function(e){
                    document.querySelector('#box').classList.toggle('shadow');
                },false);
            },false);
        </script>
    </head>
    <body>
        <div id="box" class="box">
            
        </div>
        <p class="btns">
                <a id="readCss">读CSS属性</a>
            <a id="writeCss">写CSS属性</a>
            <a id="addClass">增加CSS类</a>
            <a id="removeClass">删除CSS类</a>
            <a id="toggleClass">切换CSS类</a>
        </p>
    </body>
</html>

 

posted on 2017-06-26 13:54  沙滩海风  阅读(138)  评论(0)    收藏  举报

导航