如何使用 JavaScript 根据鼠标位置更改背景颜色？

可以使用 DOM(文档对象模型)根据光标位置更改背景颜色。在本文中，我们使用光标的位置来设置背景的值。

处理方式：处理方式是使用DOM操作，根据特定时间的光标位置改变背景。

HTML 代码：在本节中，我们有一个简单的 HTML 样板代码，其中包含一个 div 标签。

CSS 代码：在 CSS 中，我们只是将背景颜色设置为封面。

注意：您可以设置默认背景。

Javascript 代码：在 JS 中，首先使用 querySelector函数选择 div 标签，我们有 offset 属性来获取光标在二维平面上的位置，即 X 和 Y 轴。现在我们使用坐标设置背景值。

    var div = 
        document.querySelector(".geeks");
  
    div.addEventListener(
        "mousemove", function (e) {
        x = e.offsetX;
        y = e.offsetY;
        div.style.backgroundColor 
            = `rgb(${x}, ${y}, ${x - y})`;
    });

完整代码：是以上三段代码的组合。

  

    
    
    
        How to change background color
        according to mouse location
        using JavaScript ?
    
  
    
        .geeks {
            width: 100%;
            height: 600px;
            background-size: cover;
        }
    

  

    
  
    
        var div =
            document.querySelector(".geeks");
  
        div.addEventListener(
            "mousemove", function (e) {
                x = e.offsetX;
                y = e.offsetY;
                div.style.backgroundColor
                    = `rgb(${x}, ${y}, ${x - y})`;
            });
    

  

输出：