divの背景色を変更するためにJavaScriptを使用する方法

StackOverflow https://stackoverflow.com/questions/1874560

  •  18-09-2019
  •  | 
  •  

質問

以下の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と（このdivの内側）H2のbackgroundColor（ホバーちょうどCSSなど）の変化です （：ホバー）

私は、これはCSSを使用することができます知っている。現代のブラウザでこれを行うためにが、IE6が作業をdoes't

これを行うにはJavaScript（jQueryのではないか、他のJSのフレームワーク）を使用するには？

の編集：あまりにもH2ののbackgroundColorを変更する方法の

役に立ちましたか？

解決 

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

他のヒント

のコードの要素の追加/変更スタイルが悪い習慣です。今日では、<あなたがの画像の背景を変更したいと明日の後、あなたはの境界線を変更することもいいだろうということを決めた背景の色の明日を変更したいです/ em>の。

設計要件の変更は苦痛であるという理由だけで、コードごとにタイムを編集します。また、あなたのプロジェクトは、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は、このようなことwhouldます：

.content {
    background-color: blue;
}

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

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

document.getElementById()としたり、イベントハンドラ内thisを経由して、たとえば、あなたがDOM経由で変更したい要素にアクセスし、その要素にスタイルを変更します。

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

<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>
全くの事故 - 私は本当に深刻なプログラマではないと私はペニシリンが発明された方法をプログラミングで物事を発見していますので、

この1は少し奇妙かもしれません。それでは、どのようにマウスオーバーの要素を変更するには？ちょうど:hover要素と同じようにa属性を使用します。

例：

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

このはmousoverに黒い背景を持っているクラスdivを持つclassnameを変更します。あなたは基本的に任意の属性を変更することができます。 IEとFirefoxでテスト

ハッピープログラミング！

あなたの文書に非セマンティックノードを挿入して喜んでいる場合は、

、あなたは偽のAタグであなたのdivをラップすることにより、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>

jQueryのまたは任意の他のライブラリなしでこれを行うには、それぞれのdivにonMouseOverのとONMOUSEOUTイベントを添付して、イベントハンドラでスタイルを変更する必要があります。

例

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の背景が透けて見え、あまりにもそれを色付けされます。

このスクリプトを試すことができます。 ：）

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

それはちょうどJavaScriptを機能を使用してonclickのそれを呼び出す非常に簡単です。

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

    <a href="#" onclick="change()">Change Bacckground Color</a>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top