js DOM改變html和css
阿新 • • 發佈:2019-01-14
當網頁被載入時,瀏覽器會建立頁面的文件物件模型DOM,即Document Object Model。
1.改變html輸出流,通過document.write() 直接向 HTML 輸出流寫內容
<body> <p>段落</p> <script> document.write(Date()); </script> </body>
2.改變html內容,document.getElementById(id).innerHTML=''新的html
<p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <script> document.getElementById("p2").innerHTML="新文字!"; </script>
3.改變html屬性,document.getElementById(id).attribute=新屬性值
<img id="image" src="smiley.gif" width="160" height="120"> <script> document.getElementById("image").height='160'; </script>
會將圖片調整為長、寬相等的正方形圖片
4.改變css,通過document.getElementById("p1").style.css屬性=css屬性值
<p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <script> document.getElementById("p1").style.color='yellow'; document.getElementById("p2").style.background="red"; </script>