كيفية استخدام جافا سكريبت لتغيير Div BackgroundScolor

Question

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>

عندما Mouseover محتوى DIV ثم The BackgroundColor و H2 (داخل هذا DIV) تغيير اللون الخلفية (تماما مثل CSS: Hover)

أعلم أن هذا يمكن أن يستخدم CSS (: تحوم) للقيام بذلك في المتصفح الحديث ولكن IE6 لا يعمل.

كيفية استخدام JavaScript (وليس مسج أو إطار JS آخر) للقيام بذلك؟

تحرير: كيفية تغيير ProfessionScolor H2 أيضا

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

إضافة / تغيير نمط العناصر في التعليمات البرمجية هي ممارسة سيئة. اليوم تريد تغيير الخلفية اللون وغدا ترغب في تغيير الخلفية صورة وبعد الغد قررت أنه سيكون من الجيد أيضا تغيير الحدود.

تحرير الرمز في كل مرة فقط لأن متطلبات التصميم تتغير هو ألم. أيضا، إذا كان مشروعك ينمو، فإن تغيير ملفات 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;
}

Answer 3

الوصول إلى العنصر الذي تريد تغييره عبر DOM، على سبيل المثال مع document.getElementById() أو عبر this في معالج الحدث الخاص بك، وتغيير النمط في هذا العنصر:

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

تعديل

يمكنك استخدام getellementbytagname. أيضا، (غير مختبر) مثال:

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

قد يكون هذا غريب بعض الشيء لأنني في الحقيقة لست مبرمجا جادا واكتشف أشياء في برمجة بدأت البنسلين - حادث شفاف. فكيف تغيير عنصر في Mouseover؟ استخدم ال :hover سمة تماما مثل مع a عناصر.

مثال:

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

هذا يتغير أي div مع الفصل classname للحصول على خلفية سوداء على mousover. يمكنك تغيير أي سمة بشكل أساسي. اختبارها في IE و Firefox

برمجة سعيدة!

Answer 6

إذا كنت على استعداد لإدراج العقد غير الدلالية في وثيقتك، فيمكنك القيام بذلك بطريقة متوافقة مع IE فقط من خلال التفاف Divs الخاص بك في العلامات المزيفة.

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

للقيام بذلك بدون مسج أو أي مكتبة أخرى، ستحتاج إلى إرفاق 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 وألوانه أيضا.

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

انها بسيطة جدا فقط استخدم وظيفة على جافا سكريبت واتصل بها onclick

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

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