最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / clss::after 等),因为不是 dom 元素,所以 不能直接通过 js 修改其属性,虽然可以通过 切换 dom 元素的 css 样式名进行修改,但是这样就比较复杂了. 参考了一个 帖子 然后进行了一些修改,大概思路如下: 这里使用  windows 8 的工程,js 代码直接写在 defa

js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别? :first:单选.:first-child:多选(父元素第一个).:first-of-type:多选(同类型第一个): :first-of-type”是选择父元素下某个元素类型的第1个子元素(区分元素类型):“:first-child”是选择父元素下的第1个子元素(不区分元素类型) 二.-of

首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').click(function(){ var index = $(this).index(); var offset = 11; // 左侧偏移 11像素 var imgWidth = 240; // 图片的宽度是240 var pos = 0; // 因此第一个tab项的居中位置就是 240/2 + 1

js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索引相关(奇偶,开始最后,大于小于等于) 除某元素以外,某元素的第一个,最后一个,以及某元素所有和索引相关的操作 3.伪类选择器的关键性符号是什么? 冒号,以英文冒号“:”开头 4.如何选取某一个元素中的其他元素? 用后代选择器 $('ul :not(#one)').css('color','blue

用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/posts/modify-pseudo-elements-css/

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现

提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style                         行内样式的操作 2.element.className              可以获取元素的class名称 3.element.setAttribute("type","button");                获取元素修改元素的行内样式 4.insertRule(rule,index)       .document

背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s = document.createElement('style'); s.innerText = style_text; document.head.appendChild(s); } document.onclick = function() { // 添加新的style元素, 覆盖原来的属性,

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素 伪元素 属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式 1 :first-line 向文本的首行添加特殊样式 1 :before 在元素之前添加内容 2 :after 在元素之后添加内容 2       伪类  属性 描述 CSS :active 向被激活的元素添加样式 1 :hover 当鼠标悬浮在元素上时,向元素添加样式 1 :focus 向获取焦点的元素添加样式 2 :link 向未被访问过的链

优先级 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素 伪元素 属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式 1 :first-line 向文本的首行添加特殊样式 1 :before 在元素之前添加内容 2 :after 在元素之后添加内容 2       伪类  属性 描述 CSS :active 向被激活的元素添加样式 1 :hover 当鼠标悬浮在元素上时,向元素添加样式 1 :focus 向获取焦点的元素添加样式 2 :link 向未被访

之前的博文: 测试了offsetHeight获取的是页面元素的高度,包裹该元素本身内容的高度,上下padding,上下border.这个获取的但是px,px是相对单位,受电脑分辨率的影响,用LODOP进行打印的时候,不建议使用px单位,建议使用pt.mm等绝对单位 .JS修改某元素的css样式,可查看本博客另一篇相关博文: .首先设置一个div,该div设置初始的样式,颜色,padding,margin和border.然后在代码里设置判断下元素的高度如果高度不超过190,则按照原来的样式显示如果

在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了,查找了一些资料,也上网查找了一下,也有很多人在问及这个问题,如果是按照这种顺序排序,有时候显示正确,而有时候却显示不正确,追究原因,这个可能是由于浏览器的识别先后问题所导致的,也额能有缓存的原因在里面个人觉得,而最正确的写法应该是 L V H A ,举个例子: <!DOCTYP

今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textContent:获取或设置元素开始标签到结束标签之间的纯文本内容---要考虑兼容性问题IE9+;获取表单元素的内容:value: 修改属性的方法----2种 1. 核心DOM:操作一切结构化文档的API(HTML,XML)      elem.getAttribute();elem.setAttribu

伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息.前者包含那些匹配指定状态的元素,比如:visited,:active:后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target. (相当于一个特殊的class选择器,用来添加一些特殊效果) 伪元素为DOM树没有定义的虚拟元素.不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容.比如::before表示选择元素内容的之前内容,也就是""::

前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时,为其添加指定的样式. 伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中,我们可以为其添加样式. [重点]最常规的区分伪类和伪元素的方法是:实现伪类的效果可以通过添加类来实现,但是想要实现伪元素的等价效果只能创建实际的DOM节点. 注意伪类使用单冒号 ":&q

CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特殊的效果添加到某些选择器 讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技” 标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化 这话更抽象,其实意思就是对那些我们不能通过class.id等选

前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择器] 文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: silver;} [类选择器] 类选择器用于选择一类元素 .div{color: red;} // 单个类的选择 .div1.div2{color: red;} // 多个类

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. a:link|a:visited|a:hover|a:active 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的. 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得

转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before.:after称为伪类.CS

一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). 而伪元素则用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after). 二.常用伪类 伪类 用法 兼容 :link 未访问的链接 主流浏览器都支持 :visited 已访问的链接 主流浏览器都支持 :hover 鼠标划过链接 主流浏览器都支持 :active 已选中的链接 主