JavaScript DOM CSS

  • 更改HTML样式

    HTML DOM允许JavaScript更改HTML元素的样式。要更改HTML元素的样式,请使用以下语法:
    document.getElementById(id).style.property = new style
    以下示例更改<p>元素的样式:
    <html>
    <body>
    
    <p id="p2">Hello World!</p>
    
    <script>
    document.getElementById("p2").style.color = "blue";
    </script>
    
    <p>The paragraph above was changed by a script.</p>
    
    </body>
    </html>
    尝试一下
  • 使用事件

    HTML DOM允许您在事件发生时执行代码。当HTML元素发生“事情”时,浏览器会生成事件:
    当用户单击按钮时,此示例更改id="id1"元素的样式:
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1 id="id1">My Heading 1</h1>
    
    <button type="button" 
    onclick="document.getElementById('id1').style.color = 'red'">
    点击我!</button>
    
    </body>
    </html>
    尝试一下