× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息,但是却无法使用javascript来直接操作伪元素,本文以一个需求解决为例,详细介绍脚本化伪元素的6种方法 需求说明 [1]为id=box的div元素添加content="前缀"的:before伪元素 [2]为已经添加:before伪元素的div元素删除伪元素  [注意]由于IE7-浏览…

前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接改变其行间样式 <div id="test" style="height:100px;width:100px;background-color:blue;"></div> <script> test.onclick = functio…

× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化样式表当然也是一种脚本化CSS的技术,虽然不经常使用,但有时却非常有用.下面将详细介绍脚本化样式表的内容 CSSStyleSheet CSSStyleSheet类型表示的是样式表.我们知道,引入CSS一共有3种方式,包括行间样式.内部样式和外部样式.其中,内部样式和外部样式分别通过<style>和…

前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂 所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式 动态样式包括两种情况:一种是通过<link>元素插入外部样式表,另一种是通过<style>元素插入内部样式.下面将详细介绍这两种情况 外部样式 /*style.css里面的内容*/ .…

前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.javascript文件.CSS文件等外部资源),就会触发window上的load事件 [注意]IE8-浏览器不会为该事件设置srcElement属性,而其他浏览器的target属性指向document window.onload = function(e){ e = e || event; var tar…

原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.这篇教程将覆盖到…

用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.我们只需要记住的细小不同点,根据不同情况选择上面这些方法中适合的方法来隐藏元素. d…

前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通过伪元素更好地实现更多的可能! 初识伪元素  说起伪元素我第一想到的莫过于::before和::after这两个了,它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点.那这时我不禁地想问:"直接添加两个class为.before和.after不是一样的吗?"  其…

css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:absolut;left/top:-99999px;足够大的负值使其不可见 三:visibility:hidden:隐藏占位,不会响应点击事件. 四:opacity:0:严格来说这个并不是隐藏,透明之后它还占据着页面位置,所以在重排的时候还是会被计算消耗性能. 五:width/height为0 而且可以在二…

.green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; margin: 20px; line-height: 100px } .myDiv { opacity: 0 } .myDiv:hover { opacity: 1 } .blue { width: 100px; height: 100px; background-color: #b7f9fb; tex…