<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修改伪类元素样式的更多相关文章

  1. js修改伪类的值

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

  2. 关于伪类元素:before和:after

    关于伪类元素:before和:after   CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪 :link:未被访问状态 :visited:已被访问状态 :hover:鼠标 ...

  3. css伪类元素：after 的多功能用法——任意大小的底边框

    需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板 ...

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

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

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

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

  6. button不能添加伪类元素

    今日试了一下button添加伪类元素,结果是不行的前后都叠加在一起 html代码: <button class="form_btn" formType="submi ...

  7. CSS样式学习-3、轮廓、伪类/元素、display-flex布局

    一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...

  8. 伪类元素before&after

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. js修改文档的样式

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Java ...

随机推荐

  1. 新概念英语（1-17）How do you do ?

    Is there a problem wtih the Customers officer? What are Michael Baker and Jeremy Short's jobs? A:Com ...

  2. Linux--慕课学习

    刚开始接触Linux,很有幸的在慕课网上看到了Peter老师的Linux入门课程,老师讲课真的式行云流水,深入浅出,循循善诱,层层递进. 老师分享的都是自己多年来总结的经验.看完之后也学到了很多东西. ...

  3. EasyUI DataGrid - 嵌套的DataGrid

    实现效果: 一.在页面头部引用视图脚本JS文件 <script src="@Url.Content("~/Resources/EasyUI/plugins/datagrid- ...

  4. c#＊＊＊＊＊＊＊＊＊＊＊＊＊＊

    ddfbvbb c v我wossssssss

  5. python基础——面向对象进阶

    python基础--面向对象进阶 1.isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 ...

  6. 编程基础学习JS的入门教程

    将JavaScript 插入网页的方法 使用<script>标签在网页中插入Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中 ...

  7. java中的数组概念

    数组的定义形式: 动态初始化方式: 1.声明并开辟数组 String str[]=new String[3];//3表示数组的长度 2.分布完成 String str[]=null; str=new ...

  8. 前端小白想要编写可维护的js

    我是一名前端小白,之前没写过多少代码,心里没有代码质量这个概念,人人都说代码是团队的产物,应该将代码写规范,但是我对具体什么样的代码是可维护的是茫然的. 我没写过多少代码,本来好多东西就不咋会,每次给 ...

  9. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  10. localStorage学习总结

    一.本地存储 在HTML5诞生之前,网站如果想在浏览器端存储数据,只能使用Cookie,使用Cookie有较多的限制. Cookie问题: 1.cookie大小限制在4K左右(各个浏览器不一致) 2. ...