走入javascript(四)操作标簽屬性操作css樣式[]的使用

1.在javascript中有很多的屬性可以進行讀和寫,但有很多屬性隻可讀不可寫。

eg:

可讀可寫:

oBox.innerHTML = 'Hello World'; 寫操作

alert( oBox.innerHTML );  讀操作

2.操作标簽屬性

(1)知道了id  如何擷取title?

<div id="box" title="你好" name="我是名字" afei="我是阿飛" ></div>

alert( oBox.title );     你好

alert( oBox.name ); undefined

alert( oBox.afei ); undefined

div中是沒有自定義标簽和name标簽的,如果擷取某标簽上的合法标簽屬性,直接用 .操作 就可以,但是注意擷取class的時候 不可以直接使用,一般使用另一種方式代替叫做className。

3.設定标簽屬性

eg:obox.title = '大家好';

obox.id = 'Lee';

obox.className = 'dachui';

4.動态規則/靜态規則

問題1

var oBox = document.getElementByClassName('box');

oBox.id = 'wrap';

這時候oBox還是不是原來的oBox?

oBox還是原來的oBox,通過id擷取元素之後,即使變更了id,這個元素還是這個元素。隻人标簽,不認id或class的名字,隻和節點有關

問題2

通過class擷取修改class名還是原來的元素麼?

length 是一個隻讀屬性,無論如何修改,它都會準确彈出長度。

這就是動态方法和靜态方法的差別,動态就是說擷取了元素之後不是一個固定的東西,集合不是一個固定的東西,會随着class名的變化而變化,就是說你每用一次

它都會進行重新擷取一次，第一次你變更了class名字 重新擷取之後 便會從6變成了5.

而靜态規則則不同(document.getElementById),單個的元素擷取到之後無論怎麼修改都可以,而集合是動态變化的則不行。

當你拿出dachui[0]的時候，它從集合變成了元素，元素是永遠不會跟着你屬性的變化去變化

document.getElementsByClassName('dachui')[0];也可以很好的處理動态問題(單個就是靜态規則,多個就是動态規則);

5.自定義屬性的操作

(1).操作在操作合法屬性的時候,屬性才和标簽相等，在操作不合法的屬性的時候,是完全不同的倆個東西，前者是html的自定義标簽,而後者則是js的對象的自定義屬性

如果你沒有定義自定義屬性 而直接進行擷取就得到的結果就是 undefined

eg: var obox = document.getElementById('box');

//alert( obox.afei );   ->   undefined

undefined的原因在于 js彈出的是對象的自定義屬性 而不是自定義标簽 你未對自定義屬性進行申明，是以你彈出的永遠都是undefined。

(2)getAttribute() 讀取自定義屬性标簽

eg:obox.getAttribute('afei');

(3)setAttribute() 設定自定義屬性

倆個參數 第一個是對誰進行修改,第二個參數修改成什麼

如果設定一個新的自定義标簽,則會将新的屬性添加到标簽屬性中

(4)removeAttribute 删除自定義屬性标簽

eg:removeAttribute('goudan');  一個參數 對誰操作

getAttribute同時也可以擷取合法的标簽屬性,但是沒必要,.操作足矣,也就是說這個标簽既可以擷取非法的也可以擷取合法的。setAttribute removeAttribute也同樣可以但是會有差别

比如obx.getAttribute('class')和obox.className 擷取的資料是一樣的，但是前者的參數是一個字元串,字元串就不會有關鍵字那麼一說,而後者則是一個屬性,則要考慮到關鍵字和保留字

6.操作元素樣式

(1)外部樣式

單純的js不采用背景技術,是不可以修改外部檔案的

(2)style樣式表

js在操作元素屬性時,多數是操作标簽樣式

遇到屬性中帶有連詞符的,删除連詞符,連詞符後的第一個字母大寫

1.第一種操作style的方法

eg:<style id="css">#box{width:100px;}</style>

var ocss = document.getElementById("css");

ocss.innerHTML += 'height:300px;';這種方法也可以修改

2.第二種修改style方法

eg:oBox.style.width = '200px';

如果控制的樣式比較多,也可以用cssText

oBox.style.cssText = 'width:300px;height:300px;background:green;';

eg:将代碼值指派給oBox對象下的屬性

oBox.style = 'width:300px;height:300px;background:green;';

這樣也可以 但是不要去這樣寫不規範 因為js是不容許給一個屬性指派一個字元串的

3.在實戰中一般會使用className進行style屬性的操作

eg:

.box{width:100px;height:100px;background:#F60;}

.on{width:200px;height:200px;background:skyblue;}

<div class="box"></div>

var oBox = document.getElementsByClassName('box')[0];

oBox.className = 'on';

當代碼量大的時候 建議使用class命名。

4.遺留問題

以前版本的浏覽器不支援float屬性,需要産改寫為cssFloat(主流) styleFloat(IE) 現在版本浏覽器都已經支援

5.讀取style屬性

eg:<div style="width:100px;height:100px;background:#F60;" id="box"></div>

alert( oBox.style );  -> object CSSstyleDeclaration  會告訴你一下 這個值是一個對象 這樣操作隻能彈出對象的類型

alert( oBox.style.height );   -> 100px

6.style樣式

style樣式這種擷取方法 隻能擷取行内樣式,不能擷取實際樣式

7.[]的使用

(1)集合

拿到集合中的第幾個

document.getElementsByClassName[0];

(2)[]在屬性中的操作

eg: var x = 'height';

alert( obox.style.x );

這樣操作是不可以的,因為X是一個變量,前者的X為全局變量,而box.style.x則是box的一個私有屬性,不可以直接使用,全局變量,自定義屬性,标簽屬性即使名字一樣,但仍不相同。

oBox.style.x的意思是 oBox下面的X屬性，CSS顯然沒有這個屬性是以obox[x]才可以，這時X才會變成變量X

eg:oBox.style[x]

oBox.style[x] = oBox.style.height

[]能代替大部分.操作來使用,隻要把屬性值變成字元串就可以

eg:擷取到了一個元素 但是它是一個字元串'height'

oBox.style.'height' 肯定是不可用的 

oBox.style['height'] 隻能用這個操作字元串

eg:

oBox['onclick'] = function(){

alert('112233');

}

已知屬性,但屬性是一個字元串,沒辦法直接使用就可以用[];

8.一些不可用來做判斷的屬性

background(相對路徑 src href) color 這些東西,并不是你寫什麼路徑,它就會擷取什麼值