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

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

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

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

Итак, вместо того, чтобы изменять прямые свойства стиля, вы можете добавлять / удалять классы CSS на узлах. В вашем конкретном случае вам нужно сделать это только для родительского узла - " 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;
}

Получите доступ к элементу, который вы хотите изменить, через DOM, например, с помощью document.getElementById () или через this в вашем обработчике событий и измените стиль в этом элементе:

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

EDIT

Вы также можете использовать 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'); }
    }
}

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

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

Если вы хотите вставить несемантические узлы в свой документ, вы можете сделать это, используя только CSS-совместимость с IE, заключив свои 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>