dom元素屬性操作(常規屬性操作)

2021-10-11 07:28:21 字數 1330 閱讀 1304

注:原生js操作樣式,只能操作元素的行內樣式

1.操作類名稱

console.log(btnlist.classname);

console.log(btnlist.name);

console.log(btnlist.id);

console.log(btnlist.style);

console.log(btnlist.style.width);

console.log(btnlist.style.height);

執行結果:

2.設定屬性

console.log(btnlist.classlist);//  返回元素的class 列表

btnlist.classlist.add("data");// 類新增

console.log(btnlist.classlist.contains("pink"));/ /檢測元素是否具有某個類 true false

console.log(btnlist.classlist.length);// 輸出元素類幾個

btnlist.classlist.remove("data");// 移除類

//toggle 引數2 boolean true 新增 false 移除 可以不寫

btnlist.classlist.toggle("pink",false);// 類別的切換`

btnlist.style.width="200px";

btnlist.style.backgroundposition="0px 0px";

btnlist.style.border="1px solid red";

btnlist.style="width:120px;height:30px; color:blue;"/*復合屬性*/

3.設定自定義屬性

第一步(設定自定義屬性):btnlist.setattribute("cls-tag","自定義");

第二步(自定義屬性的獲取):console.log(btnlist.getattribute("cls-tag"));

4.獲取當前元素的非行內樣式方法

console.log(window.getcomputedstyle(btnlist).backgroundcolor);

DOM方式操作元素屬性

原生js取屬性值getattribute var optionsjson this.getattribute data options 1.獲取 getattribute 名稱 2.設定 setattribute 名稱,值 3.刪除 removeattribute 名稱 用classname選擇元素...

DOM 屬性操作

href title id src classname var link document.getelementbyid link console.log link.href console.log link.title var pic document.getelementbyid pic con...

DOM對元素屬性的操作

獲取元素屬性值 input.getattribute type 給元素新增屬性值 第乙個引數是屬性名,第二個引數是屬性的值 必須兩個引數 input.setattribute yes ok yes ok新增屬性 乙個值 input.attributes.setnameditem disabled 建...