2 2 封裝乙個獲取元素的樣式的方法

2021-09-27 13:43:00 字數 1873 閱讀 8902

一、設定和獲取行內的樣式

"box"

>

<

/div>

//設給元素置樣式 (注意這設定的是行內樣式)

var obox = document.

getelementbyid

('box'

) obox.style.width =

'200px'

; obox.style.height =

'200px'

; obox.style.background =

'red'

// 獲取 (帶單位,且只能獲取行內的樣式)

console.

log(obox.style.width)

//200px

console.

log(obox.style.height)

//200px

console.

log(box.style.background)

//red

<

/script>

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

二、style內的樣式的獲取

用getcomputedstyle(元素).width 這種方法既可以獲取style內的也可以獲取行內的

"box" style=

"width: 100px"

>

<

/div>

var obox = document.

getelementbyid

('box'

)// getcomputedstyle(元素).樣式名 這個方法得到計算以後的元素的樣式 行內和style裡的都能得到

console.

log(

getcomputedstyle

(obox)

.width)

//200px帶單位

console.

log(

getcomputedstyle

(obox)

.height)

//200px帶單位

console.

log(

getcomputedstyle

(obox)

.background)

//rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box

console.

log(

getcomputedstyle

(obox)

.backgroundcolor)

//rgb(255, 0, 0)

<

/script>

//但是有相容性問題 ie8及以下沒有 用

元素.currentstyle.樣式名

封裝方法

```csharp

"box" style=

"width: 100px"

>

<

/div>

var obox = document.

getelementbyid

('box'

)// 這個方法用於獲取元素的樣式

// 傳幾個引數 1.目標 2.樣式

//相容ie8及以下

function getstyle

(obj, attr)

else

} console.

log(

getstyle

(obox,

'width'

))

es6 封裝乙個基礎的表單驗證

設計乙個通用的表單驗證,如果後期表單中新增了更多的需求,不需要更改之前的 邏輯,最好不要改之前的 需要加什麼直接加就好了。此表單驗證最好返回乙個函式,在api設計這塊我選擇在每個表單項上新增valid屬性,在驗證中通過檢視是否有valid屬性 valid屬性的內容來獲取需要驗證的表單,並且返回驗證的...

IO4 1封裝乙個刪除檔案函式

需求如題。首先,我們需要建立乙個檔案 filename path py.txt try f open filename path,w 寫入模式,會沖刷掉檔案內容 print f.write 作者,黃蓉 f.close except 異常處理 print s檔案找不到 filename path 成功...

實現乙個獲取元素樣式的函式getStyle

2009 1 21 13 58 33 元素的css樣式,除了包括內聯的 即通過style屬性加上的 樣式定義外,還有 頁面嵌入的css和外部引入的css兩種方式。但在js中通過el.style.只能獲取的內聯的樣式屬性,這就存在比較大的侷限性。好在瀏覽器都 提供了另外的方式來獲取以其它方式定義的樣式...