div标签改变样式

1. 改变标签的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script>
        // 看到下面的代码,有些同学可能就有疑问了.是不是可以将下面的三个函数进行合并呢?
        // 通过观察我们发现在函数中有两处不同,一个是具体的样式,含有一个就是样式的值.
        // 所以在合并的时候,函数的入参需要两个,例如下面的函数.
        function setStyle(name, value){
            var oDiv = document.getElementById('div1');
            // name: 代表的就是div标签的样式style中的某个属性的名称
            // 这样的方式,属于第二种操作属性的方式, 要选取的属性是可以变化的,而不是写死的.
            oDiv.style[name] = value;
        }
        /* function toWidth(){
            var oDiv = document.getElementById('div1');
            oDiv.style.width = '400px';
        }
        function toHeight(){
            var oDiv = document.getElementById('div1');
            oDiv.style.height = '400px';
        }
        function toGreen(){
            var oDiv = document.getElementById('div1');
            oDiv.style.background = 'green';
        } */
    </script>
</head>
<body>
    <input type="button" value="变宽" onclick="setStyle('width', '400px')">
    <input type="button" value="变高" onclick="setStyle('height', '400px')">
    <input type="button" value="变绿" onclick="setStyle('background', 'green')">
    <!-- <input type="button" value="变宽" onclick="toWidth()">
    <input type="button" value="变高" onclick="toHeight()">
    <input type="button" value="变绿" onclick="toGreen()"> -->
    <div id="div1"></div>
</body>
</html>

2. 操作属性的两种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script>
        // 看到下面的代码,有些同学可能就有疑问了.是不是可以将下面的三个函数进行合并呢?
        // 通过观察我们发现在函数中有两处不同,一个是具体的样式,含有一个就是样式的值.
        // 所以在合并的时候,函数的入参需要两个,例如下面的函数.
        function setStyle(name, value){
            var oDiv = document.getElementById('div1');
            // name: 代表的就是div标签的样式style中的某个属性的名称
            // 这样的方式,属于第二种操作属性的方式, 要选取的属性是可以变化的,而不是写死的.
            oDiv.style[name] = value;
        }
        /* function toWidth(){
            var oDiv = document.getElementById('div1');
            oDiv.style.width = '400px';
        }
        function toHeight(){
            var oDiv = document.getElementById('div1');
            oDiv.style.height = '400px';
        }
        function toGreen(){
            var oDiv = document.getElementById('div1');
            oDiv.style.background = 'green';
        } */
    </script>
</head>
<body>
    <input type="button" value="变宽" onclick="setStyle('width', '400px')">
    <input type="button" value="变高" onclick="setStyle('height', '400px')">
    <input type="button" value="变绿" onclick="setStyle('background', 'green')">
    <!-- <input type="button" value="变宽" onclick="toWidth()">
    <input type="button" value="变高" onclick="toHeight()">
    <input type="button" value="变绿" onclick="toGreen()"> -->
    <div id="div1"></div>
</body>
</html>

猜你喜欢