JavaScript学习笔记（DOM-改变CSS）

偏执的太偏执、 2023-02-12 12:27 1阅读 0赞

HTML DOM 允许 JavaScript 更改 HTML 元素的样式。

### 改变HTML样式 ###

如需更改HTML元素的样式，请使用此语法 ：

document.getElementById(id).style.property = new style

下面的例子更改了p元素的样式：  
例子：

<body>
        <p id="p1">Hello World!</p>
        <p id="p2">Hello World!</p>
    
        <script> document.getElementById("p2").style.color = "blue"; document.getElementById("p2").style.fontFamily ="Arial"; document.getElementById("之").style.fontSize = "larger"; </script>
    
        <p>第二个段落的样式已被脚本修改。</p>
    
        
    </body>

![在这里插入图片描述][20200526105125234.png]

--------------------

### 使用事件 ###

HTML DOM允许在事件发生时执行代码。  
当“某些事情”在HTML元素上发生时，浏览器会生成事件：

*  点击某个元素时
 *  页面加载时
 *  输入字段被更改时  
    本例会在用户点击按钮时，更改 id=“id1” 的 HTML 元素的样式：

![在这里插入图片描述][20200526105631612.png]

--------------------

## 如何使元素不可见。您是否希望显示元素？ ##

<body>
    
        <h1 id="id1">显示或者隐藏文本</h1>
        <p  id = "p1">
            这是文本。
            这是文本。
            这是文本。
            这是文本。
        </p>
    
        <input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility = 'hidden'">
    
        <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility = 'visible'">
    </body>

![在这里插入图片描述][20200526110202376.png]

[20200526105125234.png]: https://img-blog.csdnimg.cn/20200526105125234.png
[20200526105631612.png]: https://img-blog.csdnimg.cn/20200526105631612.png
[20200526110202376.png]: https://img-blog.csdnimg.cn/20200526110202376.png