1. 程式人生 > >js DOM改變html和css

js DOM改變html和css

當網頁被載入時,瀏覽器會建立頁面的文件物件模型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>