用JS修改伪类/元素的样式

在不能修改HTML和CSS的前提下,如果要用JS修改伪类可以这样做:

原本的代码:

<style>

li:before{content:"·"}

</style>

<ul>

  <li>日曜日</li>

  <li>月曜日</li>

  <li>火曜日</li>

  <li>水曜日</li>

  <li>木曜日</li>

  <li>金曜日</li>

  <li>土曜日</li>

</ul>

添加的JavaScript:

var style = document.createElement("style");

var text = document.createTextNode("ul li:before{content:"*";}");

style.appendChild(text);

document.body.appendChild(style);

如上,可以通过JavaScript创建嵌入的样式将原本伪类/元素的样式覆盖掉即可。

注意,新的选择器的权值一定要比原本选择器的权值高(参考CSS选择器优先级)

另外,支持querySelector的浏览器也是可以选择伪类的,但那样做要写很多代码,还要考虑兼容性,不如使用这种方式!

以上!

adam

时间: 2024-08-27 06:33:30

用JS修改伪类/元素的样式的相关文章

js修改伪类元素样式

<style type="text/css"> .htmlbox_close::before, .htmlbox_close::after { content: ''; position: absolute; height: 2px; top: 4%; width: 3%; left: 2%; margin-top: -1px; background: #51aed9; height: 1.1%; } .htmlbox_close::before { -webkit-tra

js修改伪类before边框颜色

在touch中,我们常用的1px边方案就是通过伪类+transform的scale来缩放伪类元素,达到1像素边的方案. 但是在实际的项目中,经常会存在希望通过后台配置来控制前端样式的展示,例如通过配置来实现边框颜色的修改.此时需要动态的使用js动态的修改before的style属性. 常见的方法有 动态创建style标签,然后生成新类名的伪类样式来覆盖原有的样式 伪代码如下: var color = '#9e9e9e' var style = document.createElement('st

js修改伪类的值

css文件 p.change:after { content: attr(data-content); } js文件 $(this).addClass('change').attr('data-content', content);

用一个例子学习CSS的伪类元素

CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通过DOM去控制它的.而其用法也很简单,和一些伪类一样,如:a:hover, a:active.那么伪元素这里便是 a:before, a:after. 关于伪元素,最重要的一个属性便是 content 属性,如果CSS中的伪元素没有content属性,那么这个伪元素就是没有任何效果的.但是我们可以给

辛星浅析伪类元素before和after

其中:before和:after的作用就是在指定的元素内容(不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素. 最基本的用法如下: #xin:before{ content:"之前的内容"; color:red; } #xin:after{ content:"之后的内容"; color:blue; } 上面的代码会在#xin元素之前之后插入相应的内容,插入的行内元素是作为#xin的子元素. 需要说明的是如果没有content元素,那么伪类元

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

关于伪类元素:before和:after

关于伪类元素:before和:after Posted@2011-11-02 3:02 p.m. Categoriescss :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { content: "#"; color: red; } #example:after { content: "$"; color: red; } 这段代码

css中伪类元素:before及:after用法浅谈

JS代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0; padding: 0; } .wrap{ margin-top: 10px; width: 150px; padding: 10px; position: relative; } .wrap span:nth

使用JavaScript修改伪类样式的方法

前言 项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式,但是我们都知道JavaScript或jQuery并没有伪类选择器.这里总结一下几种常见的方法. HTML <p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</p> CSS .red::before { content: 'red'; color: red; } 方法 方法一: