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>
  • 相关阅读:
    CentOS6.5安装Qt4.8.6+QtCreator2.6.1
    利用C++调用天气webservice-gSOAP方法
    win7_32下编译FFmpeg
    CentOS下yum安装FFmpeg
    Windows下编译live555源码
    live555笔记_hi3516A
    大公司都有哪些开源项目~~~阿里,百度,腾讯,360,新浪,网易,小米等
    置顶博客
    Linux之GDB学习
    Linux之RTOS学习
  • 原文地址:https://www.cnblogs.com/justSmile2/p/10451713.html
Copyright © 2011-2022 走看看