DOM 脚本化css
nicexibeidage
这个作者很懒,什么都没留下…
展开
-
深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
前面的话 我们可以通过计算样式来读取伪元素的样式信息,但是却无法使用javascript来直接操作伪元素,本文以一个需求解决为例,详细介绍脚本化伪元素的6种方法需求说明 【1】为id=box的div元素添加content="前缀"的:before伪元素 【2】为已经添加:before伪元素的div元素删除伪元素 [注意]由于IE7-浏览器不支持:b转载 2018-01-09 12:58:32 · 177 阅读 · 0 评论 -
深入理解脚本化CSS系列第五篇——动态样式
前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦。但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂 所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式 动态样式包括两种情况:一种是通过元素插入外部样式表,另一种是通过元素转载 2018-01-09 11:35:31 · 144 阅读 · 0 评论 -
深入理解脚本化CSS系列第四篇——脚本化样式表
前面的话 关于脚本化CSS,查询样式时,查询的是计算样式;设置单个样式时,设置的是行间样式;设置多个样式时,设置的是CSS类名。脚本化样式表当然也是一种脚本化CSS的技术,虽然不经常使用,但有时却非常有用。下面将详细介绍脚本化样式表的内容 CSSStyleSheet CSSStyleSheet类型表示的是样式表。我们知道,引入CSS一共有3种方式,包转载 2018-01-05 17:35:15 · 207 阅读 · 0 评论 -
深入理解脚本化CSS系列第三篇——脚本化CSS类
前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接改变其行间样式div id="test" style="height:100px;width:100px;background-color:blue转载 2017-12-05 18:08:37 · 92 阅读 · 0 评论 -
深入理解脚本化CSS系列第二篇——查询计算样式
前面的话 元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade)层叠的含义。访问第一篇中的style属性只能获取行间样式,这通常来说,并不是我们想要的结果。本文将详细介绍如何查询计算样式 getComputedStyle() 元素的计算样式(computedStyle)是一组在显示元素时实际使用的属性值,也是用一个 CSSSty转载 2017-12-05 14:53:08 · 210 阅读 · 0 评论 -
深入理解脚本化CSS系列第一篇——脚本化行内样式
前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS。引入CSS有3种方式:外部样式,内部样式和行间样式。本文将主要介绍脚本化行间样式 基本用法 行间样式又叫内联样式,使用HTML的style属性进行设置div style="height: 40px;width: 40px;background-color: blue;">di转载 2017-12-05 13:42:14 · 214 阅读 · 0 评论