2020.10.30 循环精灵图类选择器（用于添加多个样式属性）百度换肤案例排他思想鼠标经过事件自定义属性

本文链接：https://blog.csdn.net/qq_48942961/article/details/109380316

本文介绍了JavaScript中如何通过className操作DOM元素样式，包括新建类并应用，使用多类名选择器，以及循环修改背景图。还展示了事件处理，如点击切换背景图片，以及运用排他思想实现唯一选中效果。此外，提到了获取和设置自定义属性的方法。

摘要由CSDN通过智能技术生成

通过className

1在style中新建一个类
2element.class = ‘类名’;

   <style>
        .change {
            width: 200px;
            height: 100px;
            color: red;
            font-size: 100px;
            background-color: salmon;
        }
    </style>
    <script>
        var box = document.querySelector('.box');
        box.onclick = function() {
            box.className = ' box change';
        }
    </script>

当需要保留变化前的类名则可使用多类名选择器

  box.className = ' box change';

循环精灵图

利用 for循环批量改变背景图的位置

<style>
    li {
        background: url(sprite.png) no-repeat;
        width: 40px;
        height: 40px;
        float: left;
        list-style: none;
    }
    
    .box {
        width: 200px;
        height: 300px;
    }
</style>

<body>
    <ul class="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var lis = document.querySelectorAll('li');

        for (var i = 0; i < lis.length; i++) {
            var index = 44 * i;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';

        }
    </script>

效果：
在这里插入图片描述

百度换肤案例：利用for循环可以给每一个选择到的属性添加效果

<body>
    <ul class="box">
        <img src="https://c-ssl.duitang.com/uploads/item/202001/09/20200109064418_xbltl.thumb.1000_0.jpg" alt="">
        <img src="https://c-ssl.duitang.com/uploads/item/202002/01/20200201090354_rtquq.thumb.1000_0.jpg" alt="">
        <img src="https://c-ssl.duitang.com/uploads/item/202005/13/20200513173036_xiqgb.thumb.1000_0.jpeg" alt="">
        <img src="https://c-ssl.duitang.com/uploads/item/202005/13/20200513173037_xbhbn.thumb.1000_0.jpeg" alt="">
    </ul>
    <script>
        var imgs = document.querySelector('ul').querySelectorAll('img');
        console.log(imgs);
        var body = document.body;
        for (i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

排他思想（）算法

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                this.style.backgroundColor = 'green';//注意这里必须用this 代替

            }
        }
    </script>

当事件源是可变的时，function（）函数中的事件源名词用this 代替

以上代码只能实现将li颜色改变，但不能只改其中一个颜色
要想实现改变一个Li的颜色，然后让其他颜色复原就要用到排他思想
排他思想：每次点击先将所有元素的颜色都复原，再改变其中的一个元素的属性：其中要用到双循环

<script>
        var lis = document.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {

            lis[i].onclick = function() {
            //干掉其他所有li的颜色
                for (var j = 0; j < lis.length; j++) {
                    lis[j].style.backgroundColor = '';
                }
               //单独设置li[i]的颜色
                this.style.backgroundColor = 'green';

            }
        }
    </script>