JavaScript与css

一.DOM的style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM的style属性</title>
    <style type="text/css">
        span{
            font-size: 16px;
            font-family: arial,helvetica,sans-serif;
            padding: 20px;
        }
    </style>
    <script type="text/javascript">
        function toggle(){
            var myElement = document.getElementById("id1");
            if(myElement.style.backgroundColor =='red'){
                //JavaScript不允许在属性或方法名称里使用连字符,因此需要删除连字符并将连字符后的字母大写
                myElement.style.backgroundColor = 'yellow';
                myElement.style.color = 'black';
            }else{
                myElement.style.backgroundColor = 'red';
                myElement.style.color = 'white';
            }
        }
        window.onload = function(){
            document.getElementById("btn1").onclick = toggle;
        }
    </script>
</head>
<body>
    <span id="id1">welcome back to my site</span>
    <input type="button" id="btn1" value="toggle">
</body>
</html>

二.使用className访问类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用className访问类</title>
    <style type="text/css">
    .classA{
        width: 180px;
        border: 3px solid black;
        background-color: white;
        color: red;
        font:normal 24px arial,helvetical,sans-serif;
        padding: 20px;
    }
    .classB{
        width: 180px;
        border: 3px dotted black;
        background-color: gray;
        color: black;
        font:italic 24px "Time New Roman",serif;
        padding: 20px;
    }
    </style>
    <script type="text/javascript">
        function toggleClass(){
            var myElement = document.getElementById("id1");
            if(myElement.className == "classA"){
                myElement.className = "classB";
            }else{
                myElement.className = "calssA"
            }
        }
        window.onload = function(){
            document.getElementById("btn1").onclick = toggleClass;
        }
    </script>
</head>
<body>
    <span id="id1" class="classA">An element with a touch of class</span>
    <input type="button" id="btn1" value="toggle">
</body>
</html>

className获取class样式名

三.DOM里的styleSheets

1)document对象的styleSheets属性是一个数组. (2)styleSheets数组的项目是以数值索引,第一个出现的样式表索引是0

3)数组里的每个样式表都有一个属性disabled,true为禁用/false为开启

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM的styleSheets对象</title>
    <style type="text/css">
    body{
        background-color: white;
        color:red;
        font: normal 24px arial,helvetica,sans-serif;
        padding: 20px;
    }
    </style>
    <style type="text/css">
    body{
        background-color: black;
        color:gray;
        font: italic bold 24px "Tiems New Roman",serif;
        padding: 20px;
    }
    </style>
    <script type="text/javascript">
        //用来判断是哪个样式表
        var whichSheet = 0;
        //禁用第一个样式表
        document.styleSheets[1].disabled = true;
        function sheet(){
            document.styleSheets[whichSheet].disabled = true;
            //来回切换样式表
            whichSheet = (whichSheet == 1) ?0:1;
            document.styleSheets[whichSheet].disabled = false;
        }
        window.onload = function(){
            document.getElementById("btn1").onclick = sheet;
        }
    </script>
</head>
<body>
    <!-- 
        1)document对象的styleSheets属性是一个数组.  (2)styleSheets数组的项目是以数值索引,第一个出现的样式表索引是0
        3)数组里的每个样式表都有一个属性disabled
        true为禁用/false为开启
     -->
     Switch my stylesheet with the button below!
     <br/>
     <input type="button" id="btn1" value="toggle"/>
</body>
</html>

切换样式: