JS点击图片指定对象变色两种方法

zlq7777

于 2023-11-09 19:06:18 发布

阅读量483

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zlq7777/article/details/134318438

版权

要求：点击上面的颜色实现下面的图像变成相同的颜色

难点：对于js函数的this对象不太清楚如何传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>changeColor</title>
    <style>
        td {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td style="background-color: #2f74ff"></td>
            <td style="background-color: yellow"></td>
            <td style="background-color: pink"></td>
            <td style="background-color: red"></td>
            <td style="background-color: green"></td>
            <td style="background-color: grey"></td>
            <td style="background-color: chocolate"></td>
        </tr>
    </table>
    <table id="square" style="width: 500px; height: 500px; background-color: lightblue">

    </table>
    <script>
        function changColor(){
            console.log(this)
            var bc = this.style.backgroundColor
            var target = document.getElementById('square')
            target.style.backgroundColor = bc
        }
        var tot = document.querySelectorAll('table tr td')
        for (const obj of tot) {
            obj.onclick = changColor
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>changeColor</title>
    <style>
        td {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td style="background-color: #2f74ff" onclick="changColor(this)"></td>
            <td style="background-color: yellow" onclick="changColor(this)"></td>
            <td style="background-color: pink" onclick="changColor(this)"></td>
            <td style="background-color: red" onclick="changColor(this)"></td>
            <td style="background-color: green" onclick="changColor(this)"></td>
            <td style="background-color: grey" onclick="changColor(this)"></td>
            <td style="background-color: chocolate" onclick="changColor(this)"></td>
        </tr>
    </table>
    <table id="square" style="width: 500px; height: 500px; background-color: lightblue">

    </table>
    <script>
        function changColor(obj){
            console.log(obj)
            var bc = obj.style.backgroundColor
            var target = document.getElementById('square')
            target.style.backgroundColor = bc
        }
    </script>
</body>
</html>