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;
}

方法一

使用JavaScript或者jQuery切换<p>元素的类名，修改样式。

.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');

方法二

在已存在的<style>中动态插入新样式。

document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);

方法三

创建一份新的样式表，并使用JavaScript或jQuery将其插入到<head>中

// Create a new style tag
var style = document.createElement("style");

// Append the style tag to head
document.head.appendChild(style);

// Grab the stylesheet object
sheet = style.sheet

// Use addRule or insertRule to inject styles
sheet.addRule('.red::before','color: green');
sheet.insertRule('.red::before { color: green }', 0);

jQuery

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

方法四

使用HTML5的data-属性，在属性中使用attr()动态修改。

<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
content: attr(data-attr);
color: red;
}
$('.red').attr('data-attr', 'green');

以上就是我们为大家整理的四种方法，如果大家有更好的方法，可以在下方的留言区讨论。

赞 (0)

相关推荐

  • 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; } 方法一 使用Java

  • 用js实现before和after伪类的样式修改的示例代码

    本文介绍了使用javascript,jQuery实现修改before,after伪类的样式,分享给大家,具体如下: 最近遇到一个需要改变:before,:after 伪类的样式,发现css中并不能直接选择某一个元素的:before和:after伪类元素,所以特总结了使用javascript和jQuery改变元素的:before和:after伪类样式的方法. 类如如下的html及样式 <p class="red">Hello,are you kain?</p> c

  • javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. 2.使用obj.style.cssTest来修改嵌入式的css. 3.使用obj.className来修改样式表的类名. 4.使用更改外联的css文件,从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的. CSS .style1{margin:10px auto ;b

  • Whatever:hover 无需javascript让IE支持丰富伪类

    这很酷,因为这使你可以仅通过 css来对表格行(<tr>)应用鼠标滑过事件(mouseover)时的特殊效果.然而,万恶的IE,对 :hover伪类顶多只提供了有限的支持,具体支持的程度要取决于你的IE浏览器的具体版本. Whatever:hover 是一个小小的脚本,它可以迅速.自动地为IE6,IE7,IE8添加标准的 :hover.:active 和:focus 伪类支持.第三版引入了 ajax 支持,意味着通过 javascript动态添加到文档中的任意html元素也同样可以在IE中响应

  • JavaScript CSS修改学习第三章 修改样式表

    请注意代码和传统的DHTML的区别.在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表.在这里查看W3C DOM-CSS的兼容性列表.定义 一个页面总是包含一个或者几个样式表,一个样式表里面包含一条或者几条规则,一条规则里有详细的样式声明.这个页面的样式表如下: 复制代码 代码如下: <link rel="stylesheet" href="../quirksmode.css"> <style> <!--

  • JavaScript DOM操作表格及样式

    一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe

  • 解决IE7以下版本不支持无A状态伪类的几种方法

    在IE7以下版本一直是不支持无A状态伪类的,通常都要靠Javascript来解决的,最近经常有人问起此类问题,故整理了几种方法,脚本来自国外网站,供大家参考. 方法一 javascript文件,来自Htmldog . 复制代码 代码如下: function suckerfish(type, tag, parentId) {     if (window.attachEvent) {         window.attachEvent("onload", function() {   

  • 前端通过JavaScript创建修改CAD图形详情

    目录 1.现状 2.JS新建修改CAD图形 2.1 支持的CAD实体类型 3.应用场景 1.现状 创建修改CAD图形,一般是基于AutoCAD进行二次开发,ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包,它提供了以C++为基础的面向对象的开发环境及应用程序接口,能真正快速的访问AutoCAD图形数据库. 与以往的 AutoCAD 二次开发工具 AutoLISP 和ADS不同,ObjectARX应用程序是一个DLL(动态链接库),共享AutoCAD

  • jQuery 关于伪类选择符的使用说明

    jQuery 关于伪类选择符的使用说明

    jQuery选择器的强大不仅在于选择器支持基本的css选择符,还支持很多CSS的伪类选择符,甚至可以自定义选择符,下面让我们来看看一些伪类选择符 :nth-child的用法         nth-child是一个css3伪类选择符,在jQuery中被实现了,在Jquery API中对nth-child的定义是:"匹配其父元素下的第N个子或奇偶元素".读着感觉有点绕口,下面让我们通过例子来说明: 复制代码 代码如下: <div>    <ul>    <l

  • JavaScript flash复制库类 Zero Clipboard

    本文将介绍一个跨浏览器的库类 Zero Clipboard .它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪

随机推荐