JS 對html標籤的屬性的干預以及JS 對CSS 樣式表屬性的干預

 

-任何標籤的任何屬性均可以修改!

-HTML裏是怎麼寫, JS就怎麼寫

 

如下是一段js 做用於 css 的 href的 代碼

 

<link id="l1" rel="stylesheet" type="text/css" href="css1.css" />

<script>

function skin1()

{

    var oL=document.getElementById('l1');

    

    oL.href='css1.css';

}

 

function skin2()

{

    var oL=document.getElementById('l1');

    

    oL.href='css2.css';

}

</script>

 

 

<input type="button" value="皮膚1" onclick="skin1()" />

<input type="button" value="皮膚2" onclick="skin2()" />

原理:

1.更改皮膚樣式是經過<link> 連接 css文件達成的

2.href = 'XXX' 是決定皮膚引用的連接文件是這個仍是那個.

3. 更改 href 這個動態的變化是經過:

1. 事件觸發 'skin1' 'skin2'

2. skin1 或2 更改當前href = 的值

 

咱們在變動css的時候不是變動css樣式數據自己, 而是變動引用數據.

在從此的編程裏面思惟, 變動意味着1. 變動源碼, 2. 變動引用.

 

 

css+JS代碼步驟:

1.確認變動 類型, 是' 引用'仍是' 源碼'.         若是是通常採起外部引用的css, 多數以變動引用

2. 安插id 或者class 到更改區域

3.直接用script函數干預id 的 '引用'或是'源碼'        css 通常用href去引用

4. 想象並決定用哪一個事件 (參考下表)

5.賦值觸發script 函數.事件屬性(某個html下的標籤),

 

屬性	當如下狀況發生時，出現此事件	FF	N	IE
onabort	圖像加載被中斷	1	3	4
onblur	元素失去焦點	1	2	3
onchange	用戶改變域的內容	1	2	3
onclick	鼠標點擊某個對象	1	2	3
ondblclick	鼠標雙擊某個對象	1	4	4
onerror	當加載文檔或圖像時發生某個錯誤	1	3	4
onfocus	元素得到焦點	1	2	3
onkeydown	某個鍵盤的鍵被按下	1	4	3
onkeypress	某個鍵盤的鍵被按下或按住	1	4	3
onkeyup	某個鍵盤的鍵被鬆開	1	4	3
onload	某個頁面或圖像被完成加載	1	2	3
onmousedown	某個鼠標按鍵被按下	1	4	4
onmousemove	鼠標被移動	1	6	3
onmouseout	鼠標從某元素移開	1	4	4
onmouseover	鼠標被移到某元素之上	1	2	3
onmouseup	某個鼠標按鍵被鬆開	1	4	4
onreset	重置按鈕被點擊	1	3	4
onresize	窗口或框架被調整尺寸	1	4	4
onselect	文本被選定	1	2	3
onsubmit	提交按鈕被點擊	1	2	3
onunload	用戶退出頁面	1	2	3

 

 

如下是一段JS做用於標籤的事件屬性的代碼

 

如下是一個例子:

1. 這是更改源碼的類型
2. 找到源碼區域 input, 幫input區域加一個id
3. 想象一個叫onclick的事件, 當鼠標移上去id源碼就要改變
4. 創建script 函數, 更變動'.title'並賦值
5. 賦值觸發script 函數.事件屬性(input type=button)

 

<script>

function setText()

{

    var oTxt=document.getElementById('txt1');

    

    oTxt.title='abcddfdasfe';

}

</script>

 

<input id="txt1" type="text" />

<input type="button" value="改文字" onclick="setText()" />