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

 更新时间:2017年09月07日 17:16:29   作者:wksmile  
本篇文章主要介绍了用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>

css样式

.red:before {
  content: 'red',
  background-color : red
}

1.使用javascript或者jQuery切换,增加元素的类

.green:before {
  content: 'green';
  background-color: green;
}

$('p').addClass('green');

2.在存在的style文档中动态插入样式

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

3.创建一份新的样式表,并使用JavaScript或jQuert将其插入到中

var style = document.creatElement('style');
document.head.appendChild(style);
sheet = style.sheet;
sheet.addRule('.red:before','background-color:green');
sheet.insertRule('.red:before{background-color:green}',0);

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

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

在p标签中增加data-attr="red"属性,然后

$('red').attr('data-attr','green');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript对象的创建模式与继承模式示例讲解

    JavaScript对象的创建模式与继承模式示例讲解

    继承机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有的特性基础上进行扩展,增加功能,这样产生新的类,称作是派生类。继承呈现了面向对象程序设计的层析结构,体现了由简单到复杂的认知过程。继承是类设计层次的复用
    2022-12-12
  • javascript实现登录框拖拽

    javascript实现登录框拖拽

    这篇文章主要为大家详细介绍了javascript实现登录框拖拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 详解Webpack多环境代码打包的方法

    详解Webpack多环境代码打包的方法

    这篇文章主要介绍了详解Webpack多环境代码打包的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 微信小程序在其他页面监听globalData中值的变化

    微信小程序在其他页面监听globalData中值的变化

    这篇文章主要给大家介绍了关于微信小程序如何在其他页面监听globalData中值的变化的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • layer.alert自定义关闭回调事件的方法

    layer.alert自定义关闭回调事件的方法

    今天小编就为大家分享一篇layer.alert自定义关闭回调事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javaScript中slice函数用法实例分析

    javaScript中slice函数用法实例分析

    这篇文章主要介绍了javaScript中slice函数用法,较为详细的分析了javascript中slice函数的功能、定义及使用方法,需要的朋友可以参考下
    2015-06-06
  • 基于JS制作一个简单的网页版地图

    基于JS制作一个简单的网页版地图

    本文将利用JS实现一个简单的网页版地图,这个简单的网页版地图能根据城市名进行位置查询。文中的示例代码讲解详细,感兴趣的可以了解一下
    2022-05-05
  • 老生常谈JavaScript 函数表达式

    老生常谈JavaScript 函数表达式

    下面小编就为大家带来一篇老生常谈JavaScript 函数表达式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • js实现符合国情的日期插件详解

    js实现符合国情的日期插件详解

    本篇文章主要介绍了js实现符合国情的日期插件的方法与步骤。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js中json对象和字符串的理解及相互转化操作实现方法

    js中json对象和字符串的理解及相互转化操作实现方法

    这篇文章主要介绍了js中json对象和字符串的理解及相互转化操作实现方法,结合实例形式分析了json对象与字符串的功能以及相互转换操作实现技巧,需要的朋友可以参考下
    2017-09-09

最新评论