it-swarm.com.ru

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

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 Framework), чтобы сделать это?

Правка: как изменить h2 backgroundColor тоже

26
lanqy
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';
};
60
Jacob Relkin

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

Редактировать код каждый раз только потому, что меняются требования к дизайну, это боль. Кроме того, если ваш проект будет расти, изменение файлов 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;
}
9
nemisj

Получите доступ к элементу, который вы хотите изменить, через 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'); }
    }
}
5
catchmeifyoutry
<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>
3
Vincent Ramdhanie

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

Пример:

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

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

Удачного программирования!

1
Las

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

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

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

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

0
Jon Benedicto

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

    <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>
0
G-Phys

Если вы хотите вставить несемантические узлы в ваш документ, вы можете сделать это только для 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>
0
jhurshman