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>
  • 相关阅读:
    使用Fiddler模拟客户端http响应
    Vim显示行号
    Convert int to byte array
    bare linefeeds received in ASCII mode
    Memory Analyse Tool
    what is the difference between static and normal variables in c++
    Looper Could not create wake pip
    Convert Java Doc to CHM using jd2chm
    ARM(RISC)和x86(CISC)的技术差异
    处理器架构——从RISC与CISC到x86、ARM、MIPS
  • 原文地址:https://www.cnblogs.com/justSmile2/p/10451713.html
Copyright © 2011-2022 走看看