<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. VS 提示：请考虑使用 app.config 将程序集“XXX”从版本“XX”重新映射到版本“XX”，以解决冲突并消除警告。

    具体提示如下: 请考虑使用 app.config 将程序集"System.Web.Http.WebHost, Culture=neutral, PublicKeyToken=31bf3856 ...

  2. 新概念英语（1-137）A pleasant dream

    Lesson 137 A pleasant dream 美好的梦 Listen to the tape then answer this question. What would Julie like ...

  3. JS for循环小题2

    ********** for(var a = 1; a<=4;a++){ //外循环定义循环4次,4行 for(var i= 1;i<=a;i++){ //内循环控制*的打印次数,循环一次 ...

  4. mysql导出与导入

    环境 centos6.5 32位 Mysql 5.7.19 导出 mysqldump用法 导出整个数据库 [root@mini2 mysql]# mysqldump -p123456 --databa ...

  5. Python入门之PyCharm的快捷键与常用设置和扩展(Win系统)

    1.  PyCharm的快捷键 2 . PyCharm的常用设置和扩展 ---------------------------------------------------------------- ...

  6. 基于 MySQL 的数据库实践（准备工作）

    背景 本学期在北京大学选修了<数据库概论>的实验班课程,由于 SQL 语法并不是特别理论的内容,因此课上暂时也没有特别展开.出于探索数据库领域的兴趣,使用国内普遍使用的数据库软件 MySQ ...

  7. 初学Java Web(9)——学生管理系统（简易版）总结

    项目开始时间:2018年4月8日14:37:47 项目完成时间:2018年4月9日10:03:30 技术准备 这个项目是自己用于巩固 J2EE 相关知识的练手项目,非常简单,但是相关的功能却非常实用, ...

  8. 深度学习中Xavier初始化

    "Xavier"初始化方法是一种很有效的神经网络初始化方法,方法来源于2010年的一篇论文<Understanding the difficulty of training ...

  9. 什么是web框架

    什么是web框架 web应用框架是支持动态网站.网络应用程序的软件框架. web框架的工作方式:接收http请求并处理,分派代码, 产生html,创建http响应. web框架 通常包含了:url路由 ...

  10. angularjs中的run（）方法使用

    run方法用于初始化全局的数据,仅对全局作用域起作用. 举个栗子吧:<script type="text/javascript"> var m1 = angular.m ...