CSS 与 JavaScript 是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本章介绍如何通过 JavaScript 操作 CSS。
HTML 元素的 style 属性
操作 CSS 样式最简单的方法,就是使用网页元素节点的getAttribute()方法、setAttribute()方法和removeAttribute()方法,直接读写或删除网页元素的style属性。
div.setAttribute(
'style',
'background-color:red; '+'border:1px solid black;'
);
上面的代码相当于下面的 HTML 代码。
<div style="background-color:red; border:1px solid black;" />
style不仅可以使用字符串读写,它本身还是一个对象,部署了 CSSStyleDeclaration 接口(详见下面的介绍),可以直接读写个别属性。
e.style.fontSize ='18px';
e.style.color ='black';