03 操作樣式 改變內容 的運用

2021-08-28 16:05:35 字數 1771 閱讀 1872

一、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標籤

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

六、[ ]的初步認識

1.[ ]內部的資料有序號 從0開始

2.陣列.length  --》獲取陣列的長度

3.陣列可以儲存所有的資料型別

七.[ ]能代替.操作

eg:var obj = document.getelementbyid("box");

var a = "innerhtml";

obj[a] = "";

obj['innerhtml'] = '123'; --->注意:需要保證中括號內為字串

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

注意:1.乙個物件下面不存在的屬性在運用的時候 只會是undefined不會報錯

2.乙個直接的變數 當不存在的時候(沒有var)會報錯

3.自定義屬性:

1.全域性的變數 和 物件 .的屬性,即使同名 也沒有任何關係

2.乙個物件可以通過.操作新增乙個原本沒有的屬性用來存值

3.乙個物件下面不存在的屬性,在運用的時候,只會是undefined不會報錯

4.物件後面的.操作可以用的形式來代替:

eg:obox.innerhtml = "";    ----》    obox["innerhtml"] = "";

改變Alert的樣式

abc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc abcabc...

改變title的樣式

android的title預設樣式有些單調,今天來介紹如何改變title的樣式。這裡我在前面加了個logo,而且改變了title的背景和高度。首先編寫title的布局檔案,title.xml 然後在activity的oncreate 裡加上這三句話 requestwindowfeature wind...

Css改變checkbox的樣式

乙個核取方塊 帶文字的 核取方塊的顏色,和對勾的顏色都是可以更改的。html 結構 css region checkbox樣式 span span input span label 建立方框中的對勾,對於這一點,我們可以使用 after偽類建立乙個新的元素,為了實現這個樣式,我們可以建立乙個5px ...