1. 程式人生 > >03-操作樣式、改變內容、[]的運用

03-操作樣式、改變內容、[]的運用

一、var變數時需要注意 儘量見名知意     eg:oBox --->  object box         這是一個js物件 --->節點物件

    eg: aNum --->  number num         表示這是一個  --->數字物件

二、獲取/設定 css樣式     1. “.”操作         eg:oBox.style.height == "500px" --->單個行內樣式 設定高度         eg:oBox.style.backgroundColor == "#fff" --->單個行內樣式 設定背景顏色         eg:oBox.style.cssText --> 獲取行內樣式所有文字

        這種方式只能獲取行內樣式的值

    2.操作多個行內樣式:         eg:oBox.style.cssText = "width:500px;height:500px;"  --> 需要注意原本的oBox有沒有style屬性   解決方法:就是將 = 變為 +=

    3.可以通過操作className來操作實現新增樣式

    4.關於操作float屬性的問題 --》現在直接操作也可以但是為了保險可以寫下面的兩種         oBox.styleFloat ="left"; --》以前給IE的相容寫法          oBox.style.cssFloat = "left"; -->以前給其他瀏覽器的相容寫法          5.獲取顏色/路徑時的問題:         ①.當你在樣式表中寫的是background:pink;時 使用.style.backgroundColor獲取的值可能是grb的顏色值 所以不要用顏色來進行判斷         ②.當比使用.href獲取路徑的時候 瀏覽器會自動在地址前面新增字首 所以 同樣不要用來做判斷

    注意:目前瀏覽器允許 節點.style="樣式"  的直接操作 但是最好不要這樣,使用:節點.style.cssText = 樣式 來代替

三、符合屬性的駝峰寫法     儘量操作精準的紫屬性,比如需要改背景顏色需要寫成backgroundColor 而不是background

四、innerHTML --》設定或獲取物件內容 包括子標籤     eg:op.innerHTML = "<p>123</p>"  -->設定一個P標籤

五、innerText --》設定或獲取物件的文字內容 不會包括子標籤

六、[ ]的初步認識     1.[ ]內部的資料有序號 從0開始     2.陣列.length  --》獲取陣列的長度     3.陣列可以儲存所有的資料型別

七.[ ]能代替.操作     eg:var obj = document.getElementById("box");         var a = "innerHTML";         obj[a] = "<p>123</p>";        obj['innerHTML'] = '123'; --->注意:需要保證中括號內為字串

    需要注意的是 :obj.a = "<p>123</p>";是錯誤的 --》.操作的a應該是全域性的  而且不能也能用.操作變數  應該使用[]代替.操作

注意:1.一個物件下面不存在的屬性在運用的時候 只會是undefined不會報錯     2.一個直接的變數 當不存在的時候(沒有var)會報錯     3.自定義屬性:          1.全域性的變數 和 物件 .的屬性,即使同名 也沒有任何關係         2.一個物件可以通過.操作新增一個原本沒有的屬性用來存值         3.一個物件下面不存在的屬性,在運用的時候,只會是undefined不會報錯     4.物件後面的.操作可以用[]的形式來代替:         eg:oBox.innerHTML = "<p>123</p>";    ----》    oBox["innerHTML"] = "<p>123</p>";