使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

时间: 2018-01-31阅读: 5844标签: 元素

在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在html中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的。在使用伪元素的时候,会发现js并不真能直接控制它,这篇文章主要就介绍下如果间接的控制、修改css中伪元素的方法。


例如,我的样式表有以下规则,需要把伪元素的content内容进行修改

<style>
    p:after{content:'after伪元素'}
</style>
<p id="dome">正文内容</p>


方法一:样式覆盖

<script>
document.onclick=function(){
	var sty=document.createElement('style');
	sty.innerText='p:after{content:\'修改一下\'}';
	document.body.appendChild(sty);
};
</script>

我们直接创建一个style的标签。它的优缺点:

优点:任何字符串都可以动态插入到样式中。
缺点:原始风格不改变,只是重写; 反复使用document.createElement()可以使DOM量增加


方法二:class名重写

添加一个重写的样式:

p.special:after {content: "修改一下";}

然后在js中这样操作它:

<script>
document.onclick=function(){
	var p=document.getElementById('dome');
	p.setAttribute("class","special");
};
</script>

我们使用setAttribute()能轻松地添加或删除这个类。这样实现的优缺点:

优点:易于实现; 能通过js迅速改变多种风格; 能使用样式在js中分离出去。
缺点: css必须预先写好,所以伪元素中内容不是完全动态的


方法三:使用css中attr()

我们可以在css中使用sttr()来读取一个特定的DOM属性,如果你浏览器支持伪元素就会支持css中使用attr()。

<style>
p:after {
	content: attr(data-after);
}
</style>

<p id="dome">正文内容</p>
	
<script>
var p=document.getElementById('dome');
p.setAttribute("data-after","我是后缀");//初始值
document.onclick=function(){
	p.setAttribute("data-after","修改一下");
};
</script>

在我们想换的内容不确定的时候,使用这个方法是非常值的推荐的。它的优缺点如下:

优点:不会创建无尽的额外风格
缺点: attr()在css中只能应用于内容字符串,而不能使用URL或RGB颜色


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/409

css position absolute相对于父元素的设置方式

大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。有时候我们需要在父元素的容器内设置相对的绝对位置

js元素创建的三种方式

元素创建的三种方式:1. document.write(标签的代码及内容)2. 对象.innerHTML=标签及代码;3. document.createElement(标签的名字);

如何实现元素曝光上报?

进行数据上报的时候,经常会遇到列表数据曝光上报的问题,只对在当前可视范围内的数据内容进行曝光上报,而对于未在可视范围内的数据不进行曝光上报,等待用户滚动页面或者区域使元素出现在可视范围内时才进行曝光上报

Css元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,

原生JS如何获取当前元素属于父元素第几个子元素

我们经常通过document.getElementById 方法来获取到一个元素,这个时候我们经常需要有一个需求,那就是如何判断这个元素在父元素中的位置。原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性,额外需要注意的是该属性会遍历text节点,即回车键。

jQuery绑定动态元素的点击事件无效

之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明。

元素focus页面不滚动不定位的JS处理

有时候我们希望元素被focus的时候页面不发生滚动,例如我们点击一个按钮打开一个弹框,此时点击弹框中的关闭按钮隐藏弹框后,希望键盘的焦点回到之前的按钮上,我们就会执行如下JavaScript代码:

JS 的 Element元素对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。

元素显示隐藏的9种思路

在网页制作中,元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路,对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题

h5中的结构元素介绍

结构元素不具有任何样式,只是使页面元素的的语义更加明确。header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广