美文网首页
JavaScript改变伪元素style的几种方法

JavaScript改变伪元素style的几种方法

作者: pz明 | 来源:发表于2017-09-10 18:54 被阅读115次

 在写代码的时候遇到一个问题,我希望通过JS选中某伪元素以改变它的style,结果并没有找到可以直接选择到伪元素的方法,这里参考Pankaj Parashar的一篇博客,摘出几种简单方法以改变伪元素的style.
 示例代码:

html:
<div class="red"></div>
css:
.red::after{
   content:"red";
   color:red;
}

另加类法

css:
.green::after{
    content:"green";
    color:green;
}
js:
$("div").removeClass("red").addClass("green")

 这样,div的after伪元素就是.green::after了

新加style

$("<style>.red::after{content:'green';color:green}</style>").appendTo("head")

 如需了解更多方法,敬请参见引用文章。

Pankaj Parashar—Modify pseudo element styles with JavaScript

相关文章

  • JavaScript改变伪元素style的几种方法

     在写代码的时候遇到一个问题,我希望通过JS选中某伪元素以改变它的style,结果并没有找到可以直接选择到伪元素的...

  • part2: CSS基础-练习

    CSS全称: cascading style sheets 谈谈css伪类与伪元素 这是我见过最全的伪类和伪元素总...

  • 详解a标签中href="javascript:"的几种用法

    一、js 伪协议的几种调用方法 1、a href="javascript:js_method();" 这是常用的方...

  • dom总结:DOM2和DOM3中样式部分

    访问元素的样式 任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style...

  • HTML学习笔记(二)

    一:HTML 的 style 属性 style属性的作用:提供了一种改变所有 HTML 元素的样式的通用方法。 样...

  • 2018-01-09/

    访问元素的样式 一、style 任何支持style特性的HTML元素在Javascript中都有一个对应的styl...

  • 【css】如何实现移动端敏感的0.5px

    如下几种方法能实现0.5px边框: 1.伪元素2倍尺寸1px边框scale缩小一半 推荐 给容器内设置伪元素,设置...

  • 7 .HTML样式

    一.HTML的style属性 style属性的作用: 提供了一种改变所有HTML元素的样式的通用方法。 二.不赞成...

  • HTML 样式

    HTML 样式 style 属性用于改变 HTML 元素的样式。 HTML 的 style 属性 style 属性...

  • 前端面试知识点(3)——JS基础

    DOM操作 innerHTML 改变元素内容a.style.color 改变元素样式a.className 改变元...

网友评论

      本文标题:JavaScript改变伪元素style的几种方法

      本文链接:https://www.haomeiwen.com/subject/zxjtsxtx.html