标签：index aaa classList JavaScript pie value classes 交互 css

1、用js获取伪元素属性

  <style>
    .pie {
      width: 200px;
      height: 200px;
      background-color: aqua;
    }
    .pie::before {
      content: '我是你爸爸';
      color: blue;
      background-color: red;
    }
  </style>
  <div class="pie"></div>
  <script>
    let color = window.getComputedStyle(document.querySelector('.pie'), ':before').getPropertyValue('color')
    let bgColor = window.getComputedStyle(document.querySelector('.pie'), ':before').getPropertyValue('background-color')
    console.log(color, bgColor) // rgb(0, 0, 255) rgb(255, 0, 0)
    let content = window.getComputedStyle(document.querySelector('.pie'), ':before').getPropertyValue('content')
    console.log(content) // "我是你爸爸"
  </sciprt>

2、classList属性

  <div class="pie"></div>
  <script>
    let pie = document.querySelector('.pie')

    pie.classList.add('a1') // pie a1    添加一个类
    pie.classList.add('b1', 'b2', 'b3') // pie a1 b1 b2 b3    添加多个类
    pie.classList.remove('a1', 'b2') // pie b1 b3    删除多个类或者一个类
    pie.classList.toggle('aaa') // pie b1 b3 aaa    切换类，如果没有aaa类，则添加aaa类
    pie.classList.toggle('ccc') // pie b1 b3 aaa ccc    没有ccc就添加ccc
    pie.classList.toggle('ccc') // pie b1 b3 aaa    有ccc类就删除ccc

    let flag = pie.classList.contains('aaa')
    let flag1 = pie.classList.contains('aaa1')
    console.log(flag, flag1) // true false    判断有没有该类
    console.log(pie.classList) // ["pie", "b1", "b3", "aaa", value: "pie b1 b3 aaa"]    获取的类名组成一个数组
    console.log(pie.classList.length) // 4
    console.log(pie.classList.value) // pie b1 b3 aaa
  </script>

　　classList目前兼容到ie10，ie9及以下的兼容：

if (!("classList" in document.documentElement)) {
    Object.defineProperty(HTMLElement.prototype, 'classList', {
        get: function() {
            var self = this;
            function update(fn) {
                return function(value) {
                    var classes = self.className.split(/\s+/g),
                        index = classes.indexOf(value);
 
                    fn(classes, index, value);
                    self.className = classes.join(" ");
                }
            }
 
            return {
                add: update(function(classes, index, value) {
                    if (!~index) classes.push(value);
                }),
 
                remove: update(function(classes, index) {
                    if (~index) classes.splice(index, 1);
                }),
 
                toggle: update(function(classes, index, value) {
                    if (~index)
                        classes.splice(index, 1);
                    else
                        classes.push(value);
                }),
 
                contains: function(value) {
                    return !!~self.className.split(/\s+/g).indexOf(value);
                },
 
                item: function(i) {
                    return self.className.split(/\s+/g)[i] || null;
                }
            };
        }
    });
}

3、css鼠标指针事件

  .disabled { pointer-events: none; }

　　禁止该元素的js事件和回调函数

标签：index,aaa,classList,JavaScript,pie,value,classes,交互,css
来源： https://www.cnblogs.com/wuqilang/p/13886796.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。