zoukankan      html  css  js  c++  java
  • JavaScript之DOM HTML

    前言    

        JavaScript这门语言在一定程度上让我们html之间耦合度降低了,为什么这样说呢?JavaScript语言一样可以可以随意写入html页面一些东西,比如:JavaScriptDOM可以改变html的输出、内容、属性,下面通过几个例子加以说明。

    内容

    DOM改变 HTML输出

    语法:

     

    <script>
    document.write();
    </script>

    例子:(输出时间)

     

    <!DOCTYPE html>
    <html>
    <body>
    
    <script>
    document.write("zhoulitong");
    </script>
    
    </body>
    </html>

    DOM改变 HTML内容

    语法:

     

    document.getElementById(id).innerHTML=new HTML

    例子:(改变标题内容)

     

    <!DOCTYPE html>
    <html>
    <body>
    
    <p id="p1">Hello JavaScript!</p>
    
    <script>
    document.getElementById("p1").innerHTML="YES!";
    </script>
    
    <p>宝宝刚才的内容被残忍的修改了···</p>
    
    </body>
    </html>

    DOM改变 HTML属性

    语法:

     

    document.getElementById(id).attribute=new value

    例子:(点击按钮改变图片属性)

     

    <span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
    <html>
    <body>
    
    <img id="img" src="/i/shanghai_lupu_bridge.jpg" />
    <button type="button" onclick="myfunction()" >点我
    </button>
    <script>
    function myfunction() 
    {
    document.getElementById("img").src="/i/eg_tulip.jpg";
    }
    </script>
    
    </body>
    </html></span>

  • 相关阅读:
    POJ 2342
    SHU 413
    SHU 414
    进制转换模板
    SHU 第15届上海大学程序设计联赛夏季赛[热身赛] 第三题(G题)
    POJ 3185
    XTU 1260
    高斯消元法模板
    POJ 2057
    模态窗口的定时关闭
  • 原文地址:https://www.cnblogs.com/zhoulitong/p/6412384.html
Copyright © 2011-2022 走看看