zoukankan      html  css  js  c++  java
  • JavaScript-Runoob-JS HTML DOM :改变 CSS

    ylbtech-JavaScript-Runoob-JS HTML DOM :改变 CSS
    1.返回顶部
    1、

    JavaScript HTML DOM - 改变CSS


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


    改变 HTML 样式

    如需改变 HTML 元素的样式,请使用这个语法:

    document.getElementById(id).style.property=新样式

    下面的例子会改变 <p> 元素的样式:

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <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("p2").style.fontSize="larger";
    </script>
    <p>以上段落通过脚本修改。</p>
     
    </body>
    </html>
    尝试一下 »

    使用事件

    HTML DOM 允许我们通过触发事件来执行代码。

    比如以下事件:

    • 元素被点击。
    • 页面加载完成。
    • 输入框被修改。
    • ……

    在接下来的章节,你会学到更多关于事件的知识。

    本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:

    实例

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1 id="id1">我的标题 1</h1>
    <button type="button"
    onclick="document.getElementById('id1').style.color='red'">
    点我!</button>
    
    </body>
    </html>
    尝试一下 »


    更多实例

    Visibility
    如何使元素不可见。您希望元素显示或消失吗?

    2、
    2.返回顶部
     
    3.返回顶部
     
    4.返回顶部
     
    5.返回顶部
    1、
    2、
     
    6.返回顶部
     
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    第十九周作业
    第十八周作业
    第十七周作业
    第16周作业
    第15周作业
    第14周作业作业
    第13周作业
    第12周作业
    第二阶段月考
    RDB和AOF的区别
  • 原文地址:https://www.cnblogs.com/storebook/p/13289849.html
Copyright © 2011-2022 走看看