博客

通过js修改的样式实际上是修改了元素的

行内样式

获取元素对象:

var title = document.getElementById(“title”);

通过style属性修改样式,在css中样式名是通过 – 分隔,在js中,样式名要用驼峰命名法

title.style.fontSize = “20px”;

textContent和innerHTML属性都用于修改元素的内容,区别是:textContent设置的内容中标签会显示为标签,而innerHTML中的标签会被解析为元素对象

title.textContent = "<i>js还可以修改元素的内容</i>";

title.innerHTML = "<i>js还可以修改元素的内容</i>";

大部分的html属性,都可以在js中通过元素对象的同名属性进行修改,例如 a标签的href属性,img的src属性,input的placeholder属性等

// 通过a标签的ID获得一个a标签
var a = document.getElementById("link");
// 修改a的href属性
a.href = "http://mail.163.com";

对于元素的class属性,它可以设置多个值,它是一个列表形式的数据,修改时不会直接修改全部,而是添加一个class值或者删除一个已有的class值,所以class的修改不能直接改元素对象的class属性

元素对象的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”));