《JavaScript DOM编程艺术》13:CSS-DOM

这是《JavaScript学徒》系列的第十三课,今天会介绍《JavaScript DOM编程艺术》第9章CSS-DOM,学习用JavaScript来操作CSS。

本文同步发表于我的个人网站:

https://zacklive.com/javascript-dom-css/​

教学视频连结

YouTube

腾讯

微博

B站

结构--表示--行为

HTML:结构层(Structural layer)

CSS:表示层(Presentation layer)

JavaScript:行为层(Behavior layer)

style属性

<p id="example" style="color: grey; font-family: 'Arial', sans-serif;">An Example</p>

var para = document.getElementById("example");

alert(typeof para.style);

style属性是一个对象(object)。

para.style.color

para.style.fontFamily

所有带"-"号的属性改用驼峰命名,font-family变成fontFamily。

只能取得内嵌(inline)样式。

可直接修改:

para.style.color = "black";

className属性

覆盖class属性:

para.setAttribute("class", "intro");

para.className = "intro";

添加新class:

para.className += " intro";

注意"intro"前面有一个空格。也可自行写一个函数判断className是否存在,再决定是直接赋值还是添加。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容