zoukankan      html  css  js  c++  java
  • js修改伪类元素样式

    <style type="text/css">
    .htmlbox_close::before,
    .htmlbox_close::after {
    content: '';
    position: absolute;
    height: 2px;
    top: 4%;
    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>

    每天进步一点点
  • 相关阅读:
    Java基础五
    Java基础测试
    Java练习题
    Java基础四
    Java基础三
    Java基础二
    Java基础一
    大数据讲解
    python笔记之函数 二
    iOS UICollectionView的使用(用storyboard和xib创建)
  • 原文地址:https://www.cnblogs.com/miraclesakura/p/6244612.html
Copyright © 2011-2022 走看看