淺談JS對html標簽的屬性的干預以及對CSS樣式表屬性的干預

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

下面小編就為大家?guī)硪黄獪\談JS對html標簽的屬性的干預以及對CSS樣式表屬性的干預。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

-任何標簽的任何屬性都可以修改！

-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.更改皮膚樣式是通過<link> 鏈接 css文件達成的

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

3. 更改 href 這個動態(tài)的變化是通過:

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

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

我們在變更css的時候不是變更css樣式數(shù)據(jù)本身, 而是變更引用數(shù)據(jù).

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

css+JS代碼步驟：

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

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

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

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

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

屬性	當以下情況發(fā)生時，出現(xiàn)此事件	FF	N	IE
onabort	圖像加載被中斷	1	3	4
onblur	元素失去焦點	1	2	3
onchange	用戶改變域的內容	1	2	3
onclick	鼠標點擊某個對象	1	2	3
ondblclick	鼠標雙擊某個對象	1	4	4
onerror	當加載文檔或圖像時發(fā)生某個錯誤	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作用于標簽的事件屬性的代碼

一個例子：

這是更改源碼的類型

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

想象一個叫onclick的事件, 當鼠標移上去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對html標簽的屬性的干預以及對CSS樣式表屬性的干預就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: