修改html页面内容
title.textContent="<i>js还可以修改元素内容</i>";
textContent设置的内容中标签会显示为标签文本 会将i标签也显示出来,不会显示斜体
innerHtml中的标签会被解析为元素对象 显示斜体
修改html样式
通过同名属性修改
title.textContent="<i>js还可以修改元素内容</i>";
title.innerHTML="<i>js还可以修改元素的内容</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"
;
例如a标签的href属性,
img的src属性,
input的placehodeer属性等
// 元素对象的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属性。
它是一个列表形式的数据,修改时不会修改全部,
而是添加一个class值或删除一个已有的class值,
所以class的修改不能直接改元素对象的class属性。
// title.class="c1"; 错误的写法
我的个人博客网站:http://www.eotodo.com/ 分享前端知识