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

<p class="red">Hello,are you kain"htmlcode">

.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');


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