webForumDet fria alternativet

Kan man skriva en funktion så här?

JavaScript

7 svar · 570 visningar · startad av vic

Medlem sedan apr. 2006244 inlägg
Frågan#1
document.getElementByClassName('blink').onmousemove = function()
  {
  ...
  }

När man hovrar över en div skall den byta färg. Det kan bli en väldans massa divvar och då vill jag hellre ha en universal grej i mitt javascript än att skriva ut eventet onmouseover="document..." för varje div i htmlkoden. Hur ska man egentligen göra?

Medlem sedan dec. 20025 483 inlägg
#2

Nej, inte riktigt. Är <div>:arnas id namngivna enligt något mönster, säg, "div_1", "div_2", o.s.v.? Då

window.onload = function()
{
 var i = 1, elm;
 while (elm = document.getElementById("div_" + (i++))){
  elm.onmouseover = function()
  {
   this.style.backgroundColor = "#777";
  }
  elm.onmouseout = function()
  {
   this.style.backgroundColor = "#fff";
  }
 }
}
Medlem sedan apr. 2006244 inlägg
#3

Du besparar mig dyrbar tid ännu en gång Peter :)

Medlem sedan dec. 20025 483 inlägg
#4

Det går ju visserligen att skriva en funktion getElementsByClassName() som hämtar alla element vars värde på class-attributet uppfyller ett visst villkor, skulle man inte vilja tilldela id-värden till varje <div>.

Medlem sedan juni 20008 205 inlägg
#5

Vill man göra för alla divvar behöver de inte ens vara namngivna, man kan ju använda document.getElementsByTagName("div"):

window.onload = function()
{
 var divs = document.getElementsByTagName("div");
 for (var i = 0; i < divs.length; ++i){
  divs[i].onmouseover = function()
  {
   this.style.backgroundColor = "#777";
  }
  divs[i].onmouseout = function()
  {
   this.style.backgroundColor = "#fff";
  }
 }
}

... men det är nog klokt att göra som Peter S föreslår och ha en klass på dem som man kollar. Divvar är ju tänkta att vara generella element, man kan ju vilja ha andra divvar som inte har mouseover/out-effekt.

Medlem sedan apr. 2006244 inlägg
#6

Kan det finnas en fördel med att ta bort alla event som man har i ett htmldokumentet och flytta in dom i window.onload = function {}? Min fråga är kanske mer om det egentligen finns någon nackdel med det?

Medlem sedan dec. 20025 483 inlägg
#7

Den enda fördelen är att HTML-koden blir renare: du separerar HTML:en och JS:en. Man kan likna det vid att länka in all CSS via externa filer, i stället för att skriva style="..." direkt i taggarna.

Medlem sedan apr. 2006244 inlägg
#8

Så länge det inte påverkar funktionernas "prestanda", eller vad jag nu ska kalla det, så är det ju bara så mycket skönare att kunna köra in alla små funktioner i window.onload

// Tack grabbar för avsatt tid!

275 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
134 ms — deklarationer (db)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)
137 ms — ändringar (db)