標籤屬性 物件屬性

2021-10-13 05:38:25 字數 2117 閱讀 2526

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document<

/title>

<

/head>

"div1" title=

"qqqqq"

>

123123

<

/div>

"checkbox" name=

"" id=

"ck"

>

/* 標籤屬性 物件屬性 物件模型 */

// 標籤屬性 物件屬性 二者並不完全相同 只是類似

var div1 = document.

queryselector

("#div1"

) div1.a =

'1010100'

// 這個屬性在標籤上看不到

div1.

setattribute

('a'

,100001

)// 這個屬性在標籤上可以看到 設定的是標籤屬性

// 元素.setattribute(屬性名,屬性值) 屬性名的命名不能使用駝峰式命名 使用 - 來區分兩個單詞

// 因為html不區分大小寫 屬性值不能出現大寫 並且必須是是字串

// console.log( document.queryselector("[a='100001']") )

console.

log( div1.

getattribute

("a"))

//獲取標籤元素的值 獲取標籤屬性值

// 刪除標籤屬性

div1.

removeattribute

('a'

)// 所有的標籤單屬性 值和屬性名相同

var ck = document.

queryselector

("#ck"

)// ck.setattribute("checked","checked")

ck.setattribute

("checked",""

)//單屬性標籤

ck.setattribute

("abc"

,"101010"

)// 物件屬性並不會展示在標籤上

// 標籤屬性和物件屬性是兩套系統 衝突時 物件屬性為準

// 並不是所有標籤屬性都有對應的物件屬性

console.

log( ck )

console.

dir( ck )

console.

log( ck.abc )

// un

// 只有部分會有 例如 title id class width height

// 表單元素 name checked placeholder 一致的

// a href

ck.setattribute

('class'

,"style1"

) console.

log( ck.

class

)//class是沒有的 在物件屬性中

console.

log( ck.classname )

//classname 才會有 這個才是真正的class

// 所有的元素都有style行內樣式屬性

// div1.style = "width:50px;height:50px;background-color:red;"

div1.style.width=

"50px"

div1.style.height=

"50px"

div1.style.backgroundcolor =

"red"

// 在vue和react中 大量的標籤屬性會自動轉換成物件屬性的

<

/script>

<

/body>

<

/html>

DOM標籤屬性和物件屬性

dom元素的屬性分為兩種 1 標籤屬性 直接寫在標籤上的屬性 2 物件屬性 由於所有的dom元素都是object型別,所以我們可以通過物件的方式為dom元素設定屬性 1.標籤屬性 1 設定標籤屬性 elem.setattribute 屬性名,屬性值 注意 1 屬性名單詞之間通常用 連線,並且不使用駝...

標籤的屬性

mime multipurpose internet mail extensions 是描述訊息內容型別的網際網路標準。mime multipurpose internet mail extensions 多用途網際網路郵件擴充套件型別。性值 描述標籤的 charset 屬性 style margi...

select屬性標籤

shape用於設定形狀,可以在selector,layout等裡面使用,有6個子標籤,各屬性如下 xml version 1.0 encoding utf 8 shape xmlns android corners android radius 9dp android topleftradius 2...