DOM模型(八)—— CSS操作

CSS与JS是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本节介绍如何通过JS操作CSS。

一、Style属性


操作CSS样式最简单的方法,就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法,直接读写或删除网页元素的style属性。

div.setAttribute('style', b);
<div style="background-color:red; border:1px solid black;" ></div>

1.1、Style对象

每一个网页元素对应一个DOM节点对象。这个对象的style属性可以直接操作,用来读写行内CSS样式。

1.2、cssText属性

元素节点对象的style对象,有一个cssText属性,可以读写或删除整个样式。

注意,cssText的属性值不用改写CSS属性名。

1.3、CSS模块的侦测

1.4、setProperty(),getPropertyValue(),removeProperty()

Style对象的以下三个方法,用来读写行内CSS规则。

  • setProperty(propertyName, value):设置某个CSS属性
  • getPropertyValue(propertyName):读取某个CSS属性
  • removeProperty(propertyName):删除某个CSS属性

这三个方法的第一个参数,都是CSS属性名,且不用改写连词线。

二、window.getComputedStyle()


行内样式(inline style)具有最高的优先级,改变行内样式,通常会立即反映出来。但是,网页元素最终的样式是综合各种规则计算出来的。因此,如果想得到元素现有的样式,只读取行内样式是不够的,我们需要得到浏览器最终计算出来的那个样式规则。

window.getComputedStyle方法,就用来返回这个规则。它接受一个DOM节点对象作为参数,返回一个包含该节点最终样式信息的对象。所谓“最终样式信息”,指的是各种CSS规则叠加后的结果。

三、CSS伪元素


四、StyleSheet对象


4.1、获取样式表

StyleSheet对象代表网页的一张样式表,它包括<link>节点加载的样式表和<style>节点内嵌的样式表。

document对象的styleSheet属性,可以返回当前页面的所有StyleSheet对象(即所有样式表)。它是一个类似数组的对象。

4.2、属性

StyleSheet对象有以下属性。
(1)、media属性
media属性表示这个样式表用于屏幕(screen),还是用于打印(print),或两者都适用(all)。该属性只读,默认值是screen。

document.styleSheet[0].media.mediaText

(2)、disabled属性
disabled属性用于打开或关闭一张样式表。

一旦样式表设置了disabled属性,这张样式表就将失效。

(3)、href属性
href属性是只读属性,返回StyleSheet对象连接的样式表地址。对于内嵌的<style>节点,该属性等于null。

(4)、title属性
title属性返回StyleSheet对象的title值。

(5)、type属性
type属性返回StyleSheet对象的type值,通常是text/css。

document.styleSheets[0].type
// "text/css"

(6)、parentStyleSheet属性

(7)、ownerNode属性
ownerNode属性返回StyleSheet对象所在的DOM节点,通常是<link>或<style>。对于那些由其他样式表引用的样式表,该属性为null。

(8)、cssRules属性

4.3、insertRule(),deleteRule()

insertRule方法用于在当前样式表的cssRules对象插入CSS规则,deleteRule方法用于删除cssRules对象的CSS规则。

4.4、添加样式表

添加样式表有两种方式。一种是添加一张内置样式表,即在文档中添加一个<style>节点。

另一种是添加外部样式表,即在文档中添加一个<link>节点,然后将href属性指向外部样式表的URL。

五、CSS规则


一条CSS规则包括两个部分:CSS选择器和样式声明。下面就是一条典型的CSS规则。

.myClass {
    background-color: yellow;
}

5.1、CSSRule接口

CSS规则部署了CSSRule接口,它包括了以下属性。

5.2、CSSStyleRule接口

5.3、CSSMediaRule接口

5.4、CSSStyleDeclaration对象

六、window.matchMedia()


6.1、基本用法

6.2、监听事件

七、CSS事件


7.1、transitionEnd事件

7.2、animationstart事件,animationend事件,animationiteration事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 155,457评论 4 357
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 65,943评论 1 285
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,327评论 0 236
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,307评论 0 201
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,630评论 3 283
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,114评论 1 202
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,514评论 2 305
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,227评论 0 193
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,859评论 1 234
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,186评论 2 238
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,741评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,087评论 2 248
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,614评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,926评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,630评论 0 190
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,117评论 2 261
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,076评论 2 257

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,624评论 1 92
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 1,938评论 2 15
  • DOM 变化 如何确认浏览器是否支持 DOM 2 和 DOM 3 新增的模块:var supportsDOM2Co...
    云之外阅读 438评论 0 0
  • 赶在《白鹿原》电视剧年底上映之前,花了两天时间读完了这本巨著,这本描写20世纪初民族变迁的巨著。 《白鹿原》是一部...
    伊柒柒阅读 541评论 0 3
  • 人生在世,随着日子向前走,没有所谓的顺遂或坎坷。因为所有的顺遂,基于温暖,温暖的背后,都有伤痛;所有的坎坷,基于疤...
    l子渝阅读 436评论 0 0