注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@fc_lamp

关注Web应用解决方案MySql/PHP/Python一盏名为"飞川"的灯~

 
 
 

日志

 
 

CSS 伪类 (Pseudo-classes)(JS修改伪元素的样式问题) 与 CSS 伪元素 (Pseudo-elements)  

2016-01-03 16:33:59|  分类: Web技术-Js/Html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 一 伪类
属性描述CSS
:active向被激活的元素添加样式。1
:focus向拥有键盘输入焦点的元素添加样式。2
:hover当鼠标悬浮在元素上方时,向元素添加样式。1
:link向未被访问的链接添加样式。1
:visited向已被访问的链接添加样式。1
:first-child向元素的第一个子元素添加样式。2
:lang向带有指定 lang 属性的元素添加样式。2

二 伪元素
属性描述CSS
:first-letter向文本的第一个字母添加特殊样式。1
:first-line向文本的首行添加特殊样式。1
:before在元素之前添加内容。2
:after在元素之后添加内容。2

eg:"first-letter" 伪元素用于向文本的首字母设置特殊样式
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
以上源于:w3chool!

 三 修改伪元素的样式值
参考1:http://segmentfault.com/a/1190000003711146
参考2:

简单粗暴的方式:

简单粗暴的方式,直接在html中添加样式覆盖掉之前样式规则

<style>
p:after{content:'我是后缀'}
</style>
<p>正文内容</p>

<script>
var css=function(t,s){
s=document.createElement('style');
s.innerText=t;
document.body.appendChild(s);
};

document.onclick=function(){
css('p:after{content:\'修改一下\'}');
};
</script>

进化版

这样写了功能实现了,优雅欠佳,作为进化版,其实就是用class名来重写样式,

p:after{content:'我是后缀'}
p.change{content:'我是修改过的后缀'}

只要在需要的时候,给p标签添加change这个class就可以实现替换的目的。原理和第一个没什么区别。这样写的好处是,改变起来更优雅灵活,用class做了个钩子。

再进化版

上个版本已经解决了切换的问题,如果有更多可以不断的切换class,但是想下这种方式也还是有点笨重,因为可能要写很多css,如果是想换的内容是不确定的,需要用变量来处理呢?这时候,可能会想到用 第一种方法就可以了,但是第一种方式真的不是很优雅。还有什么方式呢?
在css中,伪元素的content是能读取到data属性的。
也就是说我们可以这样写css

p:after {
content: attr(data-content);
}

在进化版是第二版的变种,

css文件

p.change:after {
content: attr(data-content);
}

js文件

$(this).addClass('change').attr('data-content', content);

这样你就可以随意改动了。


  评论这张
 
阅读(54)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017