jq ‘’操作‘’伪元素

本文转载自查看原文 2019-02-28 17:19 1175 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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css伪类与伪元素给伪元素添加事件 css伪元素详解伪元素为什么要设置绝对定位伪元素content的应用【jQuery】 JQ和HTML以及JQ遍历元素伪类与伪元素的区别和用法 css伪类及伪元素用法关于css中伪类及伪元素的总结 css3的伪（伪类和伪元素）大合集