前端第25次总结--或与分组和非捕获组、预定义类、定时器等

本文链接：https://blog.csdn.net/A444477/article/details/117265272

----或与分组和非捕获组、预定义类、定时器和—dom操作、事件、属性和样式操作、样式计算、能力检测

或与分组、非捕获组

在这里插入图片描述

预定义类

在这里插入图片描述

定时器

在这里插入图片描述

dom操作

在这里插入图片描述

dom事件

在这里插入图片描述

属性操作

在这里插入图片描述

样式操作

在这里插入图片描述

对应与排他

在这里插入图片描述
选项卡

<body>
    <div id="app" class="app">
        <div class="header">
            <span class="choose">精选</span>
            <span>社会</span>
            <span>娱乐</span>
            <span>体育</span>
        </div>
        <div class="body">
            <p class="choose">精选内容</p>
            <p>社会内容</p>
            <p>娱乐内容</p>
            <p>体育内容</p>
        </div>
    </div>

    <script>
        // 获取元素
        var app = document.getElementById('app');
        var spans = document.getElementsByTagName('span');
        var ps = document.getElementsByTagName('p');

        // 绑定事件
        for (var i = 0; i < spans.length; i++) {
            spans[i].index = i;
            spans[i].onclick = function(){
                for (var j = 0; j < spans.length; j++) {
                    spans[j].className = '';
                };
                this.className = 'choose';
                for (var k = 0; k < ps.length; k++) {
                    ps[k].className = '';
                };
                ps[this.index].className = 'choose';
            }
        }
    </script>
</body>

样式计算

在这里插入图片描述

能力检测

在这里插入图片描述

function getStyle(obj,key) {
            // 能力判断：判断浏览器是否支持  getComputedStyle方法
            // 为什么在前面加window？  在不支持它的浏览器下也不会报错，结果为undefined
            if (window.getComputedStyle) {
                // return getComputedStyle(obj)[key];
                // 下面，将key转为横杠法
                key = key.replace(/([A-Z])/g,function(match,$1) {
                    return '-'+$1.toLowerCase();
                });
                console.log(key);
                return getComputedStyle(obj).getPropertyValue(key);
            } else {
                var style = obj.currentStyle;
                if (style) {
                    return style[key];
                } else {
                  alert('浏览器不支持获取计算样式');  
                }
            }

        }