JavaScript与css

Posted 静心*尽力

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

切换样式:

 

 

以上是关于JavaScript与css的主要内容，如果未能解决你的问题，请参考以下文章

炫酷 CSS 背景效果的 10 个代码片段

48个值得掌握的JavaScript代码片段（上）

JavaScript 代码片段

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画