Full code address: github.com/MeichaoWen/…

Js is the front-end base, so tap the base instance again, and github has the complete code.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <input type="button" value="Red" onclick="setColor('red')">
    <input type="button" value="Green" onclick="setColor('green')">
    <input type="button" value="Black" onclick="setColor('black')">
    <div id="div1"></div>
    <hr>
    <ol>
        <li>The function is used to omit duplicate code for easy reuse</li>
        <li>Parameters: function as placeholders, unlimited number of values can only be determined when the function is called</li>
        <li>Parameter usage scenarios: When there is some uncertainty in the function</li>
    </ol>
    <script>
        function setColor(color){
            var oDiv = document.getElementById('div1');
            oDiv.style.background = color;
        }
    </script>
</body>
Copy the code
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <input type="button" value="Wider" onclick="setStyle('width', '400px')">
    <input type="button" value="High" onclick="setStyle('height', '400px')">
    <input type="button" value="Black" onclick="setStyle('background', 'black')">
    <div id="div1"></div>
    <hr>
    <ol>
        <li>There are two ways to manipulate attributes: 1. 2. []</li>
        <li>Operation methods [] Application scenario: The operation attributes are not fixed. [] can contain variables, parameters, or strings</li>
        <li>Variables and parameters can be enclosed without quotation marks. Other parameters must be enclosed. Otherwise, an error not defined is reported</li>
    </ol>
    <script>
        function setStyle(name, value){
            var oDiv = document.getElementById('div1');
            oDiv.style[name] = value;
            // Two ways to manipulate attributes
            / / the first
            //oDiv.style.width -> .
            / / the second
            //oDiv['style'].width -> []
        }
        alert(ii)
    </script>
</body>
Copy the code