DOM（更改樣式_事件）

2024-04-27 15:08:25

字體：大中小

來源：轉載

供稿：網友

更改樣式

對象.style.屬性=”屬性值”

<!DOCTYPE html><html><body><h1 id="id1">My Heading 1</h1><button type="button" onclick="s()">點擊這里！</button><script>function s(){ var color = document.getElementById('id1'); if(color.style.color=="red"){ color.style.color="blue"; }else{ color.style.color="red"; }}</script></body></html>

以上可以在每次點擊按鈕是改變文字顏色。可以通過document.getElementById(‘p1’).style.visibility=’hidden’隱藏一個樣式，visibility是CSS中的屬性，

值	描述
visible	元素是可見的。默認值
hidden	元素是不可見的。
collapse	當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 “hidden”。
inherit	規定應該從父元素繼承 visibility 屬性的值。

事件

onclick

當鼠標按下時觸發的事件

onload 和 onunload

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。 onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網頁的正確版本。 onload 和 onunload 事件可用于處理 cookie。

onchange

改變文本內容時觸發

<html> <body> 改變輸入框中的文字時，將所有字母改為大寫 <input type="text" id="input"> <script> var s = document.getElementById("input"); s.onchange=function(){onchanges()}; function onchanges(){ var s2 = s.value; s.value = s2.toUpperCase() } </script> </body></html>

將輸入的字母自動改為大寫。其中可以用DOM給元素分配事件：

s.onchange=function(){onchanges()};

onmouSEOver 和 onmouseout

onmouseover 和 onmouseout 事件可用于在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。

<html> <body> <div id="test" onmouseover="over();" onmouseout="out();" style="width:400;height:200;background-color:red; text-align:center;padding-top:100px;"> 點擊可更改文字 <div> <script> var s = document.getElementById("test"); function over(){ s.innerHTML="謝謝"; } function out(){ s.innerHTML="點擊可更改文字"; } </script> </body></html>

以上代碼可以在鼠標移入和移出時改變文本的內容

onmousedown、onmouseup 以及 onclick

onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最后，當完成鼠標點擊時，會觸發 onclick 事件。將剛才的代碼稍加改動：

<html> <body> <div id="test" onmousedown="down();" onmouseup="up();" style="width:400;height:200;background-color:red; text-align:center;padding-top:100px;"> 點擊可更改顏色 <div> <script> var s = document.getElementById("test"); function down(){ s.style.backgroundColor="#1ec5e5"; s.innerHTML = "請釋放鼠標"; } function up(){ s.style.backgroundColor="red"; s.innerHTML="請按下鼠標"; } </script> </body></html>

以上只是事件中的一小部分，還有許多其他的事件以后再總結，DOM事件

上一篇：tips使用

下一篇：關于CSS的垂直居中