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

更新日期: 2018-01-31阅读量: 7512标签: 元素

在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

DOM元素节点js常用操作

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :1. nodeName : 节点的名称;2. nodeValue :节点的值;3. nodeType :节点的类型

padding-top的百分比值参考对象竟是父级元素的宽度

书写页面样式与布局是前端工程师Coding 中必不可少的一项工作,在定义页面元素的样式时,padding 属性也是经常被使用到的。padding 属性用于设置元素的内边距

js元素创建的三种方式

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

html块级元素和行级元素的区别和认识

块级元素会独占一行,其宽度自动填满其父元素宽度行内元素不会独占一行;块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果

Js中获取HTML元素的方式有哪些?

对于许多前端开发项目来说,获取元素进行操作是必不可少的,例如tab标签,全屏切换,自动滚播等效果都需要通过获取节点元素来实现。下面我们来看一下JavaScript获取HTML元素的方式。

angular怎么删除(remove)元素?

angular删除(remove)元素可以使用angular.element中的remove()方法,此方法可以将匹配元素集合从DOM中删除(同时移除元素上的事件及jQuery数据)。

如何利用JS检查元素是否在视口内

Intersection Observer API提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。在目标元素与视口或者其他指定元素发生交集时和触发配置的回调函数。

JS 创建元素的三种方法

动态创建元素一 document.write()body标签中就会插入但是这种方法几乎不用,因为这回影响页面的布局,甚至会将页面原来的内容冲刷掉,从而只显示输出内容;动态创建元素二 innerHTML

h5中的结构元素介绍

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

使用document.querySelector获取元素

使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可;注意: querySelecotor()返回某个元素节点, querySelectorAll()返回一个NodeList实例对象;

点击更多...

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