如何使用 JavaScript 更改 div 背景颜色答案

【问题标题】：How to use JavaScript to change div backgroundColor如何使用 JavaScript 更改 div 背景颜色
【发布时间】：2010-12-24 21:04:24
【问题描述】：

下面的 HTML：

<div id="category">

  <div class="content">
     <h2>some title here</h2>
      <p>some content here</p>
  </div>

  <div class="content">
     <h2>some title here</h2>
      <p>some content here</p>
  </div>

  <div class="content">
     <h2>some title here</h2>
      <p>some content here</p>
  </div>

</div>

当鼠标悬停在 div 的内容上时，它的 backgroundColor 和 h2（在这个 div 内）会改变 backgroundColor（就像 CSS：hover）

我知道这可以使用 CSS (: hover) 在现代浏览器中执行此操作，但 IE6 不起作用。

如何使用 JavaScript（不是 jQuery 或其他 JS 框架）来做到这一点？

编辑：如何更改 h2 背景颜色

【问题讨论】：

为什么要拒绝像 jquery 这样让工作更轻松、结果更可靠的工具？
虽然 JQuery 是一个出色的工具，但如果由于某种原因 jquery 不复存在怎么办？ IMO 如果有人想学习语言而不是工具，那就太好了。 :)
@Prozaker - 如果有一天互联网不复存在怎么办？就像您做出互联网存在的基本假设一样，您可以假设 jQuery 存在。事实上，你不必假设。您可以下载它并将其包含在您的源代码中。现在它消失的几率至少和你的其他代码消失的几率一样低，除非不是真的，因为存在着数百万个 jQuery 副本，以至于地球本身必须爆炸才能可靠地清除 jQuery存在。

标签： javascript background-color

【解决方案1】：

var div = document.getElementById( 'div_id' );
div.onmouseover = function() {
  this.style.backgroundColor = 'green';
  var h2s = this.getElementsByTagName( 'h2' );
  h2s[0].style.backgroundColor = 'blue';
};
div.onmouseout = function() {
  this.style.backgroundColor = 'transparent';
  var h2s = this.getElementsByTagName( 'h2' );
  h2s[0].style.backgroundColor = 'transparent';
};

【讨论】：

是否也可以通过 CLASS 更改 div 的背景颜色？似乎 .style 在通过 id 获取元素时才有效。

【解决方案2】：

在代码中添加/更改元素的样式是一种不好的做法。今天你想改变背景color，明天你想改变背景image，明天之后你决定改变border。

仅因为设计需求发生变化而每次都编辑代码是一件痛苦的事情。此外，如果你的项目会增长，更改 js 文件将更加痛苦。更多的代码，更多的痛苦。

尽量避免使用硬编码样式，这将节省您的时间，如果您做得对，您可以要求其他人执行“更改颜色”任务。

因此，您可以在节点上添加/删除 CSS 类，而不是更改样式的直接属性。在您的特定情况下，您只需对父节点执行此操作 - “div”，然后通过 CSS 设置子节点的样式。所以不需要对 DIV 和 H2 应用特定的样式属性。

还有一个推荐点。尽量不要连接硬编码的节点，而是使用一些语义来做到这一点。例如：“向所有具有‘content’类的节点添加事件。

总之，这是我将用于此类任务的代码：

//for adding a css class
function onOver(node){
   node.className = node.className + ' Hover';
}

//for removing a css class
function onOut(node){
    node.className = node.className.replace('Hover','');
}

function connect(node,event,fnc){
    if(node.addEventListener){
        node.addEventListener(event.substring(2,event.length),function(){
            fnc(node);
        },false);
    }else if(node.attachEvent){
        node.attachEvent(event,function(){
            fnc(node);
        });
    }
}

// run this one when window is loaded
var divs = document.getElementsByTagName("div");
for(var i=0,div;div =divs[i];i++){
    if(div.className.match('content')){
        connect(div,'onmouseover',onOver);
        connect(div,'onmouseout',onOut);
    }
}

你的 CSS 应该是这样的：

.content {
    background-color: blue;
}

.content.Hover{
    background-color: red;
}

.content.Hover h2{
    background-color : yellow;
}

【讨论】：

【解决方案3】：

通过 DOM 访问您要更改的元素，例如在事件处理程序中使用 document.getElementById() 或 this，然后更改该元素的样式：

document.getElementById("MyHeader").style.backgroundColor='red';

编辑

您也可以使用getElementsByTagName，（未经测试）示例：

function colorElementAndH2(elem, colorElem, colorH2) {
    // change element background color
    elem.style.backgroundColor = colorElem;
    // color first contained h2
    var h2s = elem.getElementsByTagName("h2");
    if (h2s.length > 0)
    {
        hs2[0].style.backgroundColor = colorH2;
    }
}

// add event handlers when complete document has been loaded
window.onload = function() {
    // add to _all_ divs (not sure if this is what you want though)
    var elems = document.getElementsByTagName("div");
    for(i = 0; i < elems.length; ++i)
    {
        elems[i].onmouseover = function() { colorElementAndH2(this, 'red', 'blue'); }
        elems[i].onmouseout = function() { colorElementAndH2(this, 'transparent', 'transparent'); }
    }
}

【讨论】：

【解决方案4】：

<script type="text/javascript">
 function enter(elem){
     elem.style.backgroundColor = '#FF0000';
 }

 function leave(elem){
     elem.style.backgroundColor = '#FFFFFF';
 }
</script>
 <div onmouseover="enter(this)" onmouseout="leave(this)">
       Some Text
 </div>

【讨论】：

由于您是从元素本身调用enter 和leave 函数，因此您不需要传入this 引用。您可以轻松摆脱 elem 参数，并在函数内使用 this 引用。

【解决方案5】：

这可能有点奇怪，因为我真的不是一个认真的程序员，而且我正在以发明青霉素的方式在编程中发现一些东西——纯属偶然。那么如何在鼠标悬停时更改元素？使用 :hover 属性，就像使用 a 元素一样。

例子：

div.classname:hover
{
    background-color: black;
}

这会将任何div 与classname 类更改为鼠标悬停的黑色背景。您基本上可以更改任何属性。在 IE 和 Firefox 中测试

编程愉快！

【讨论】：

【解决方案6】：

很简单，只要在javaScript上使用一个函数，然后在onclick上调用它就可以了

   <script type="text/javascript">
            function change()
            {
            document.getElementById("catestory").style.backgroundColor="#666666";
            }
            </script>

    <a href="#" onclick="change()">Change Bacckground Color</a>

【讨论】：

【解决方案7】：

如果您愿意在文档中插入非语义节点，您可以通过将 div 包装在虚假的 A 标签中，以仅 CSS IE 兼容的方式执行此操作。

<style type="text/css">
  .content {
    background: #ccc;
  }

  .fakeLink { /* This is to make the link not look like one */
    cursor: default;
    text-decoration: none;
    color: #000;
  }

  a.fakeLink:hover .content {
    background: #000;
    color: #fff;
  }

</style>
<div id="catestory">

  <a href="#" onclick="return false();" class="fakeLink">
    <div class="content">
      <h2>some title here</h2>
      <p>some content here</p>
    </div>
  </a>

  <a href="#" onclick="return false();" class="fakeLink">
    <div class="content">
      <h2>some title here</h2>
      <p>some content here</p>
    </div>
  </a>

  <a href="#" onclick="return false();" class="fakeLink">
    <div class="content">
      <h2>some title here</h2>
      <p>some content here</p>
    </div>
  </a>

</div>

【讨论】：

【解决方案8】：

要在没有 jQuery 或任何其他库的情况下执行此操作，您需要将 onMouseOver 和 onMouseOut 事件附加到每个 div 并更改事件处理程序中的样式。

例如：

var category = document.getElementById("catestory");
for (var child = category.firstChild; child != null; child = child.nextSibling) {
    if (child.nodeType == 1 && child.className == "content") {
        child.onmouseover = function() {
            this.style.backgroundColor = "#FF0000";
        }

        child.onmouseout = function() {
            // Set to transparent to let the original background show through.
            this.style.backgroundColor = "transparent"; 
        }
    }
}

如果你的h2没有设置自己的背景，div背景也会显示出来并着色。

【讨论】：

-1 恕我直言，您的代码是多余的。你打电话给getElementById() 4 次！我的代码（如下）是一个更好的例子。
好吧，也许我太苛刻了，无法投反对票。

【解决方案9】：

你可以试试这个脚本。 :)

    <html>
    <head>
    <title>Div BG color</title>
    <script type="text/javascript">
    function Off(idecko)
    {
    document.getElementById(idecko).style.background="rgba(0,0,0,0)"; <!--- Default --->
    }
    function cOn(idecko)
    {
    document.getElementById(idecko).style.background="rgb(0,60,255)"; <!--- New content color --->
    }
    function hOn(idecko)
    {
    document.getElementById(idecko).style.background="rgb(60,255,0)"; <!--- New h2 color --->
    }
    </script>
    </head>
    <body>

    <div id="catestory">

        <div class="content" id="myid1" onmouseover="cOn('myid1'); hOn('h21')" onmouseout="Off('myid1'); Off('h21')">
          <h2 id="h21">some title here</h2>
          <p>some content here</p>
        </div>

        <div class="content" id="myid2" onmouseover="cOn('myid2'); hOn('h22')" onmouseout="Off('myid2'); Off('h22')">
          <h2 id="h22">some title here</h2>
          <p>some content here</p>
        </div>

        <div class="content" id="myid3" onmouseover="cOn('myid3'); hOn('h23')" onmouseout="Off('myid3'); Off('h23')">
          <h2 id="h23">some title here</h2>
          <p>some content here</p>
        </div>

    </div>

    </body>
<html>

【讨论】：