快捷導(dǎo)航

淺談JS對(duì)html標(biāo)簽的屬性的干預(yù)以及對(duì)CSS樣式表屬性的干預(yù)

更新時(shí)間：2017年06月25日 21:36:42 投稿：jingxian

下面小編就為大家?guī)?lái)一篇淺談JS對(duì)html標(biāo)簽的屬性的干預(yù)以及對(duì)CSS樣式表屬性的干預(yù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

-任何標(biāo)簽的任何屬性都可以修改！

-HTML里是怎么寫， JS就怎么寫

以下是一段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.更改皮膚樣式是通過(guò)<link> 鏈接 css文件達(dá)成的

2.href = 'XXX' 是決定皮膚引用的鏈接文件是這個(gè)還是那個(gè).

3. 更改 href 這個(gè)動(dòng)態(tài)的變化是通過(guò):

1. 事件觸發(fā) 'skin1' 'skin2'

2. skin1 或2 更改當(dāng)前href = 的值

我們?cè)谧兏點(diǎn)ss的時(shí)候不是變更c(diǎn)ss樣式數(shù)據(jù)本身, 而是變更引用數(shù)據(jù).

在今后的編程里面思維, 變更意味著1. 變更源碼, 2. 變更引用.

css+JS代碼步驟：

1.確認(rèn)變更類型, 是' 引用'還是' 源碼'. 如果是一般采取外部引用的css, 多數(shù)以變更引用

2. 安插id 或者class 到更改區(qū)域

3.直接用script函數(shù)干預(yù)id 的 '引用'或是'源碼' css 一般用href去引用

4. 想象并決定用哪個(gè)事件 (參考下表)

5.賦值觸發(fā)script 函數(shù).事件屬性(某個(gè)html下的標(biāo)簽),

屬性	當(dāng)以下情況發(fā)生時(shí)，出現(xiàn)此事件	FF	N	IE
onabort	圖像加載被中斷	1	3	4
onblur	元素失去焦點(diǎn)	1	2	3
onchange	用戶改變域的內(nèi)容	1	2	3
onclick	鼠標(biāo)點(diǎn)擊某個(gè)對(duì)象	1	2	3
ondblclick	鼠標(biāo)雙擊某個(gè)對(duì)象	1	4	4
onerror	當(dāng)加載文檔或圖像時(shí)發(fā)生某個(gè)錯(cuò)誤	1	3	4
onfocus	元素獲得焦點(diǎn)	1	2	3
onkeydown	某個(gè)鍵盤的鍵被按下	1	4	3
onkeypress	某個(gè)鍵盤的鍵被按下或按住	1	4	3
onkeyup	某個(gè)鍵盤的鍵被松開(kāi)	1	4	3
onload	某個(gè)頁(yè)面或圖像被完成加載	1	2	3
onmousedown	某個(gè)鼠標(biāo)按鍵被按下	1	4	4
onmousemove	鼠標(biāo)被移動(dòng)	1	6	3
onmouseout	鼠標(biāo)從某元素移開(kāi)	1	4	4
onmouseover	鼠標(biāo)被移到某元素之上	1	2	3
onmouseup	某個(gè)鼠標(biāo)按鍵被松開(kāi)	1	4	4
onreset	重置按鈕被點(diǎn)擊	1	3	4
onresize	窗口或框架被調(diào)整尺寸	1	4	4
onselect	文本被選定	1	2	3
onsubmit	提交按鈕被點(diǎn)擊	1	2	3
onunload	用戶退出頁(yè)面	1	2	3

以下是一段JS作用于標(biāo)簽的事件屬性的代碼

一個(gè)例子：

這是更改源碼的類型

找到源碼區(qū)域 input, 幫input區(qū)域加一個(gè)id

想象一個(gè)叫onclick的事件, 當(dāng)鼠標(biāo)移上去id源碼就要改變

建立script 函數(shù), 更變更'.title'并賦值

賦值觸發(fā)script 函數(shù).事件屬性(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對(duì)html標(biāo)簽的屬性的干預(yù)以及對(duì)CSS樣式表屬性的干預(yù)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: