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>

时间： 2024-10-26 21:03:03

js修改伪类元素样式的相关文章

用JS修改伪类/元素的样式

在不能修改HTML和CSS的前提下,如果要用JS修改伪类可以这样做: 原本的代码: <style> li:before{content:"·"} </style> <ul> <li>日曜日</li> <li>月曜日</li> <li>火曜日</li> <li>水曜日</li> <li>木曜日</li> <li>金曜日&l

js修改伪类before边框颜色

在touch中,我们常用的1px边方案就是通过伪类+transform的scale来缩放伪类元素,达到1像素边的方案. 但是在实际的项目中,经常会存在希望通过后台配置来控制前端样式的展示,例如通过配置来实现边框颜色的修改.此时需要动态的使用js动态的修改before的style属性. 常见的方法有 动态创建style标签,然后生成新类名的伪类样式来覆盖原有的样式 伪代码如下: var color = '#9e9e9e' var style = document.createElement('st

window.getComputedStyle可获取 伪类元素 样式

window.getComputedStyle详解 window.getComputedStyle说明:getComputedStyle()返回元素的所有CSS属性的计算值语法:var style = window.getComputedStyle(element[, pseudoElt]);参数说明:element:目标元素的DOM对象pseudoElt:指明要匹配的伪元素,对于普通元素必须指定为null(或省略)(or not specified翻译成省略不知道有没有问题,不过测试结果表明对

js修改伪类的值

css文件 p.change:after { content: attr(data-content); } js文件 $(this).addClass('change').attr('data-content', content);

用一个例子学习CSS的伪类元素

CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通过DOM去控制它的.而其用法也很简单,和一些伪类一样,如:a:hover, a:active.那么伪元素这里便是 a:before, a:after. 关于伪元素,最重要的一个属性便是 content 属性,如果CSS中的伪元素没有content属性,那么这个伪元素就是没有任何效果的.但是我们可以给

辛星浅析伪类元素before和after

其中:before和:after的作用就是在指定的元素内容(不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素. 最基本的用法如下: #xin:before{ content:"之前的内容"; color:red; } #xin:after{ content:"之后的内容"; color:blue; } 上面的代码会在#xin元素之前之后插入相应的内容,插入的行内元素是作为#xin的子元素. 需要说明的是如果没有content元素,那么伪类元

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

关于伪类元素:before和:after

关于伪类元素:before和:after Posted@2011-11-02 3:02 p.m. Categoriescss :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { content: "#"; color: red; } #example:after { content: "$"; color: red; } 这段代码

css中伪类元素:before及:after用法浅谈

JS代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0; padding: 0; } .wrap{ margin-top: 10px; width: 150px; padding: 10px; position: relative; } .wrap span:nth