<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. HTTP请求到爬虫代码的终南捷径

    前阵子在做爬虫的时候学会了各种抓包,看到http请求的时候硬拼代码实在有点累. 后来发现Postman工具是直接可以把Postman请求直接生成对应的代码,这样一下来就美滋滋了. 那么最后的问题就成了 ...

  2. js实现图片（高度不确定）懒加载

    最近一直在弄广告页,由于广告页几乎都是图片拼凑起来的,为了减少服务器压力和带宽,采用图片懒加载方式,但是我们的图片高度又不确定,所以我在网上下载了echo.js自己改了一下. 大体思路是:让首页先加载 ...

  3. OAuth2.0学习（3-1）发布 spring-oauth-client 和 spring-oauth-server

    1.发布spring-oauth-server应用 1.1.创建案例数据库oauth2,root/Abc1234% 1.2.执行脚本,创建数据结构和demo数据 init_db.sql (user_用 ...

  4. RxJava系列7(最佳实践)

    RxJava系列1(简介) RxJava系列2(基本概念及使用介绍) RxJava系列3(转换操作符) RxJava系列4(过滤操作符) RxJava系列5(组合操作符) RxJava系列6(从微观角 ...

  5. VS2013 堆栈溢出调查（0xC00000FD: Stack overflow）

    在调试一个代码时,执行过程中会出现如下错误(0xC00000FD: Stack overflow). 很明显是堆栈溢出了. 网上很多方法,都是通过修改设置工程配置,把堆栈调大一些,如下图. 但是堆栈到 ...

  6. python Mysql (二)

    Mysql (二) 一. 事务 a.数据库开启事务命令 1 2 3 4 #start transaction 开启事务 #Rollback 回滚事务,即撤销指定的sql语句(只能回退insert de ...

  7. POJ-2240 Arbitrage---判断正环+枚举

    题目链接: https://vjudge.net/problem/POJ-2240 题目大意: 已知n种货币,以及m种货币汇率及方式,问能否通过货币转换,使得财富增加. 思路: 由于这里问的是财富有没 ...

  8. phpmyadmin设置编码和字符集gbk或utf8_导入中文乱码解决方法

    一.phpmyadmin设置新建数据库的默认编码为utf8编码的方法 1:新建数据库  my_db 2:使用sql语句  set character_set_server=utf8;  //设置默认新 ...

  9. typeof与instanceof的区别

    一.instanceof运算符:       此运算符可以判断一个变量是否是某个对象(类)的实例,返回值是布尔类型的.想要理解它的作用,必须对面向对象有所理解: 代码实例如下: var str=new ...

  10. Delphi X10.2 + FireDAC 使用 SQL 语句 UPDATE

    MainForm.Conn.StartTransaction; UserManagerQuery.SQL.Clear; UserManagerQuery.SQL.Text := 'UPDATE tab ...