js修改伪类元素样式

Posted 樱花飞落ll

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.htmlbox_close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
</head>

<body>
<div class="htmlbox_close"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var str = window.getComputedStyle($(‘.htmlbox_close‘)[0], ‘::before‘).getPropertyValue(‘top‘);
console.log(str);
document.styleSheets[0].addRule(‘.htmlbox_close::before‘, ‘top:100px‘);
document.styleSheets[0].insertRule(‘.htmlbox_close::before { top:100px }‘, 0);
document.styleSheets[0].addRule(‘.htmlbox_close::after‘, ‘top:100px‘);
document.styleSheets[0].insertRule(‘.htmlbox_close::before { top:100px }‘, 0);

var str2 = window.getComputedStyle($(‘.htmlbox_close‘)[0], ‘::before‘).getPropertyValue(‘top‘);
console.log(str2);
</script>
</body>











































以上是关于js修改伪类元素样式的主要内容,如果未能解决你的问题,请参考以下文章

伪元素和伪类

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

css伪类和伪元素

使用javascript,jQuery实现修改before,after伪类的样式(转)

CSS :hover伪类选择器

利用CSS hover伪类改变其他元素的总结