DIV CSS 佈局教程網

1、改變HTML輸出流

　　document.write(Date());

2、改變HTML內容

　　document.getElementById("p1").innerHTML="New text!";

3、改變HTML屬性

　　document.getElementById("image").src="http://hovertree.com/hvtimg/201601/lbau8hqb.png";

4、改變HTML樣式

　　document.getElementById("p2").style.color="blue";

5、HTML事件屬性

<button onclick="displayDate()">點擊這裡</button>
<script>
	function displayDate()
	{
		document.getElementById("de").innerHTML=Date();
	}
</script>
<p id="de"></p>

 6、鼠標事件

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green; width:120px;height:20px; padding:40px; color:#ffffff;">把鼠標移到上面</div>
<script>
	function mDown(obj)
	{
		obj.innerHTML="謝謝";
		obj.style.backgroundColor="#1ec5e5";
	}
	function mUp(obj)
	{
		obj.innerHTML="把鼠標移到上面";
		obj.style.backgroundColor="green";
	}
</script>

 7、創建新節點

var para=document.createElement("p");
var node=document.createTextNode("這是新段落");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);

 8、刪除新節點

var child=document.getElementById("p1");
child.parentNode.removeChild(child);