您好,登錄后才能下訂單哦!
小編給大家分享一下JS如何干預html標簽的屬性,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
以下是一段js 作用于 css 的 href的 代碼
<link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <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()" />
看完了這篇文章,相信你對“JS如何干預html標簽的屬性”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。