html元素,屬性修改

景凌凱發表於2018-08-24
原文網址 : https://flycode.co/archives/129197
HTML
修改html頁面內容

title.textContent=“<i>js還可以修改元素內容</i>”;
title.innerHTML=“<i>js還可以修改元素的內容</i>”;
 


textContent設定的內容中標籤會顯示為標籤文字 會將i標籤也顯示出來，不會顯示斜體
innerHtml中的標籤會被解析為元素物件 顯示斜體

修改html樣式

var title=document.getElementById(“title”);
 
// 元素物件通過style屬性修改樣式。
title.style.color=“red”;
// 在css中樣式是通過-分隔，在js中，樣式名要用駝峰命名法。
title.style.fontSize=“20px”;

 
// 通過js修改的樣式實際上修改的是元素的行內樣式。

通過同名屬性修改

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

link.href=“http://www.eotodo.com“;

 

// 元素物件的classList表示元素的class列表，。add方法用於新增一個class值。
title.classList.add(“c1”);
// .remove刪除一個class值
title.classList.remove(“c3”);
 
// toggle.切換一個class值（有則刪除，無則新增）
title.classList.toggle(“c1”);
 
// 判斷某個元素的class中是否包含某個值
console.log(title.classList.contains(“c4”));
 
// 對於元素的class屬性，它可以設定多個值。

它是一個列表形式的資料，修改時不會修改全部，

而是新增一個class值或刪除一個已有的class值，

所以class的修改不能直接改元素物件的class屬性。


 
// title.class=”c1″; 錯誤的寫法



我的個人部落格網站:http://www.eotodo.com/ 分享前端知識


相關文章