Подтвердить что ты не робот

Как использовать JavaScript для изменения div backgroundColor

HTML ниже:

<div id="catestory">

  <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 backgroundColor тоже

4b9b3361

ОТВЕТЫ

Ответ 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';
};

Ответ 2

Добавление/изменение стиля элементов в коде является плохой практикой. Сегодня вы хотите изменить цвет фона, а завтра вы хотите изменить фоновое изображение, и после завтрашнего дня вы решили, что было бы неплохо изменить границу.

Редактирование кода происходит каждый раз только потому, что изменения требований к дизайну - это боль. Кроме того, если ваш проект будет расти, изменение js файлов будет еще больнее. Больше кода, больше боли.

Попытайтесь устранить использование жестко закодированных стилей, это сэкономит ваше время, и, если вы это сделаете, вы можете попросить задание "изменить цвет" кому-то другому.

Итак, вместо изменения прямых свойств стиля вы можете добавлять/удалять классы CSS на узлах. В вашем конкретном случае вам нужно сделать это только для родительского node - "div", а затем, стиль подносов через CSS. Поэтому нет необходимости применять определенное свойство стиля к DIV и H2.

Еще одна рекомендация. Старайтесь не подключать узлы жестко запрограммированные, но используйте некоторые семантики для этого. Например: "Чтобы добавить события ко всем узлам с содержимым класса".

В качестве летнего проекта я поставил здесь код, который я бы использовал для таких задач:

//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>

Ответ 5

Это может быть немного странно, потому что я действительно не серьезный программист, и я открываю для себя то, как программируется то, как был изобретен пенициллин - просто случайность. Итак, как изменить элемент на мыши? Используйте атрибут :hover так же, как и элементы a.

Пример:

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

Это изменяет любой div с классом classname, чтобы иметь черный фон в mousover. Вы можете в принципе изменить любой атрибут. Протестировано в IE и Firefox

Счастливое программирование!

Ответ 6

Чтобы сделать это без 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 будет отображаться и окрасить его тоже.

Ответ 7

Если вы хотите вставить в свой документ не семантические узлы, вы можете сделать это только с помощью CSS-совместимого метода, обернув ваши div в поддельные теги A.

<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

Вы можете попробовать этот script.:)

    <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>

Ответ 9

Очень просто использовать функцию на javaScript и называть ее onclick

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

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