изменить Див BackgroundColor

Question

HTML, ниже Как использовать JavaScript:

<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) для этого?

Edit: как изменить h2 BackgroundColor ToO

Answer 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'; 
}; 

Answer 2

доступ к элементу, который вы хотите изменить с помощью 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'); } 
    } 
} 

Answer 3

Чтобы сделать это без 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 не установил свой собственный фон, фон ДИВ покажет через и цвет тоже.

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

Answer 5

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

Answer 6

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

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

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

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

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

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

//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 whould быть так:

.content { 
    background-color: blue; 
} 

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

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

Answer 7

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

Пример:

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

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

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

Answer 8

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

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

Answer 9

Это очень просто использовать функцию на JavaScript и назовите его OnClick

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

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