-任何標簽的任何屬性都可以修改! -HTML里是怎麼寫, JS就怎麼寫 以下是一段js 作用於 css 的 href的 代碼 以下是一段JS作用於標簽的事件屬性的代碼 ...
-任何標簽的任何屬性都可以修改!
-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作用於標簽的事件屬性的代碼
以下是一個例子:
- 這是更改源碼的類型
- 找到源碼區域 input, 幫input區域加一個id
- 想象一個叫onclick的事件, 當滑鼠移上去id源碼就要改變
- 建立script 函數, 更變更'.title'並賦值
- 賦值觸發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()" />
