zoukankan      html  css  js  c++  java
  • jq ‘’操作‘’伪元素

    1. 伪元素非 dom 元素,jq无法操作,但可以间接影响。

    2. 操作方式

    2.1 修改类

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style type="text/css">
        .techbrood:before {
          content: 'no';
          color: red;
        }
    
        .techbrood.change:before {
          content: 'yes';
        }
      </style>
    </head>
    
    <body>
    
      <div class="techbrood" id="td_pseudo">techbrood introduction</div>
    
      <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
      <script>
        // $('#td_pseudo').addClass("change");
      </script>
    
    
    </body>
    
    </html>

    2.2 改变增值属性

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style type="text/css">
        p {
          color: deepskyblue;
        }
    
        p:before {
          content: attr(data-beforeContent);
          color: darkred;
        }
      </style>
    </head>
    
    <body>
    
      <p data-beforeContent="测试">1111</p>
      <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
      <script>
        
        $(function () {
          var times = 0;
          $('p').on('click', function () {
            switch (times) {
              case 0:
                $(this).attr('data-beforeContent', '你说啥都是对的');
                times++;
                break;
              case 1:
                $(this).attr('data-beforeContent', '你这么叼咋不上天呢');
                times++;
                break;
              case 2:
                $(this).attr('data-beforeContent', '那就上天吧');
                times++;
                break;
              default:
                times = 0;
                $(this).attr('data-beforeContent', '你说啥都是对的');
                times++;
                break;
            }
          });
        });
    
      </script>
    
    
    </body>
    
    </html>
  • 相关阅读:
    git操作
    致橡树
    python 3.8 下安装 tensorflow 1.14
    TensorFlow
    内容充实丰富,情节引人入胜夺人眼球,后面的转折更是点睛之笔
    注册,监听,回调....
    技术,制度,文化
    协议 标准, 框架 ,规范
    ES数据同步方案
    成立思维课
  • 原文地址:https://www.cnblogs.com/justSmile2/p/10451713.html
Copyright © 2011-2022 走看看