通过 js 修改 html 的文本内容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>xiao001</title> 6 </head> 7 <body> 8 <h1>this is a js and html code</h1> 9 <p id = "demo">点击按钮将此处文本替换</p> 10 <button type="button" onclick="my_function()">点我</button> 11 12 <script type="text/javascript"> 13 function my_function() {//替换demo里面的文本内容 14 document.getElementById("demo").innerHTML = "Hello javascript!"; 15 } 16 </script> 17 18 </body> 19 </html>
同时我们可以发现，只要在对应 id 所在标签所包含的文本都会被替换，包括其下级标签包含的内容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>xiao001</title> 6 </head> 7 <body> 8 <h1>this is a js and html code</h1> 9 <div id = "demo"> 10 <ul> 11 <li>first</li> 12 <li>second</li> 13 <li>third</li> 14 </ul> 15 <p>this will be replace too</p> 16 </div> 17 <button type="button" onclick="my_function()">点我</button> 18 19 <script type="text/javascript"> 20 function my_function() {//替换demo里面的文本内容 21 document.getElementById("demo").innerHTML = "Hello javascript!"; 22 } 23 </script> 24 25 </body> 26 </html>
通过 js 修改 html 样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>xiao001</title> 6 </head> 7 <body> 8 <p id="demo">change the color of this paragraph</p> 9 <button type="button" onclick="my_function()">do it</button> 10 11 <script type="text/javascript"> 12 function my_function() { 13 var cnt = document.getElementById('demo');//找到元素 14 cnt.style.color = "#ff0000";//改变样式 15 } 16 </script> 17 </body> 18 </html>
同理，只要在对应 id 所在标签所包含的样式都会做出对应变化，包括其下级标签中的样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>xiao001</title> 6 </head> 7 <body> 8 <div id="demo"> 9 change the color of this paragraph 10 <ul> 11 <li>one</li> 12 <li>two</li> 13 <li>three</li> 14 </ul> 15 </div> 16 <button type="button" onclick="my_function()">do it</button> 17 18 <script type="text/javascript"> 19 function my_function() { 20 var cnt = document.getElementById('demo');//找到元素 21 cnt.style.color = "#ff0000";//改变样式 22 } 23 </script> 24 </body> 25 </html>