📌  相关文章
📜  如何使用 JavaScript 更改鼠标移动时 Div 的背景颜色?

📅  最后修改于: 2021-11-07 09:12:09             🧑  作者: Mango

可以使用 HTML、CSS 和 Javascript 轻松更改 div 框的背景颜色。我们将使用querySelector()addEventListener()方法来选择元素,然后应用一些数学逻辑来更改其背景颜色。以下部分将指导您如何创建效果。

HTML 代码:在本节中,我们将创建主体的基本结构。 body 部分包含一个

元素,当鼠标移动到 div 元素上时,该元素的背景颜色会改变。



  

    
    
        How to Change Background Color
        of a Div on Mouse Move Over
        using JavaScript ?
    

  

    
  

CSS 代码:在本节中,我们将使用一些 CSS 属性来设置 div 元素的样式。


Javascript代码:
步骤 1:第一步是创建一个由不同颜色组成的数组。

步骤 2:第二步是使用querySelector()方法选择 div 元素,然后使用addEvenListener()方法为其附加事件处理程序(鼠标悬停)。

第 3 步:在最后一步中,我们将使用一些逻辑设置 div 元素的背景样式,即我们将在数组上使用Math.random()函数返回数组范围之间的浮点数,然后使用Math.floor( )方法将浮点数向下舍入到最接近的整数。


完整代码:在本节中,我们将结合以上三个代码部分。



  

    
    
        How to Change Background Color
        of a Div on Mouse Move Over
        using JavaScript ?
    
  
    

  

    
          

输出: