通過js修改元素html屬性

2021-08-21 17:04:30 字數 899 閱讀 6179

獲取元素物件:

var title = document.getelementbyid("title");

通過style屬性修改樣式,在css中樣式名是通過 - 分隔,在js中,樣式名要用駝峰命名法

title.style.fontsize = "20px";

textcontent和innerhtml屬性都用於修改元素的內容,區別是:textcontent設定的內容中標籤會顯示為標籤,而innerhtml中的標籤會被解析為元素物件

title.textcontent = "js還可以修改元素的內容";

title.innerhtml = "js還可以修改元素的內容";

大部分的html屬性,都可以在js中通過元素物件的同名屬性進行修改,例如 a標籤的href屬性,img的src屬性,input的placeholder屬性等

// 通過a標籤的id獲得乙個a標籤

var a = document.getelementbyid("link");

// 修改a的href屬性

a.href = "";

元素物件的classlist表示元素的class列表,.add方法用於新增乙個class值.

title.classlist.add("c1");

.remove 刪除乙個class值

title.classlist.remove("c2");

toggle,切換乙個class值(無則新增,有則刪除),很常用的乙個

title.classlist.toggle("c1");

判斷某個元素的class中是否包含某個值

console.log(title.classlist.contains("c4"));

通過JS修改元素樣式

語法 元素,style.樣式名 樣式值 var box1 document.getelementbyid box1 box1.syle.width 100px 注意 如果css樣式名含有 如 background color,這種名稱在js中不合法,需要將樣式名修改為駝峰命名法,background...

jQuery 修改元素屬性

1 attr方法 獲取匹配的元素集合中的第乙個元素的屬性的值 或 設定匹配元素指定的屬性 使用說明 1 只傳乙個引數的情況 1 字串 屬性名稱 只傳乙個字串屬性名稱 表示獲取匹配的元素集合中的第乙個元素的屬性的值 2 屬性 值 集合物件 一次性設定多個屬性 2 傳兩個引數的情況 1 第乙個引數 字串...

JS 修改元素屬性的六種方式

方式一 1.setattribute 描述 設定元素的 屬性 語法 元素名.setattribute 屬性 屬性值 例子 box.setattribute style background color red height 400px 注意 設定的是行內樣式 2.getattribute 描述 獲取...