Cum se obține valoarea proprietății `background-color` în Javascript? [duplicat] (Programare, Javascript)

Navin Rauniyar a intrebat.

fiddle

Următorul cod alertează șirul gol:

HTML:

<div id="test">test</div>

CSS:

#test{
    background-color: #f00;
}

SCRIPT:

alert(document.getElementById('test').style.backgroundColor)

Dar dacă setez bgcolor în javascript, atunci ar alerta valoarea bgcolor:

document.getElementById('test').style.backgroundColor='#ff0';
alert(document.getElementById('test').style.backgroundColor) // rgb(255,255,0)

Deci, cum pot obține valoarea bgcolor fără să o setez în js care este definită în foaia de stil?

Rețineți că nu vreau să obțin deloc o valoare dacă aceasta provine din foaia de stil a agentului utilizator și nu din a mea.

Comentarii

  • style primește doar stilurile inline. Aruncați o privire la getComputedStyle: developer.mozilla.org/en/docs/Web/API/window.getComputedStyle –  > Por Evan Trimboli.
  • getComputedStyle obține și valoarea definită de browser, nu? –  > Por Navin Rauniyar.
  • @NavinRauniyar: Pe browserele care o acceptă. –  > Por T.J. Crowder.
2 răspunsuri
T.J. Crowder

Motivul pentru care nu vedeți nimic din .style este acela că vă oferă doar setul de stiluri pe elementul, nu cele pe care le primește de la foile de stil.

Pentru browserele moderne, puteți utiliza window.getComputedStyle pentru a obține calculat pentru element. Pentru IE8 (și mai devreme, dar…), puteți utiliza .currentStyle pentru a obține cam același lucru. Așadar:

var element = document.getElementById('test');
var style;
if (window.getComputedStyle) {
    style = window.getComputedStyle(element);
} else {
    style = element.currentStyle;
}
if (!style) {
    // ...seriously old browser...
} else {
    alert(style.backgroundColor);
}

Vreau doar să obțin valoarea foii de stil.

getComputedStyle/currentStyle vă va oferi acest lucru, dar vă va oferi și stilul implicit al browserului.

Nu există o interfață simplă pentru a obține doar valoarea din propriile foi de stil și nu din foaia de stil implicită a agentului utilizator. Este posibil să doriți să vă uitați la document.styleSheets proprietatea, , care vă oferă acces la foile de stil individuale analizate și la regulile acestora. Dar ar trebui să vă ocupați de logica de aplicare a acestor reguli la elementul în cauză, ceea ce este (desigur) non-trivial.

Comentarii

  • nu ia valoarea implicită a browserului (stilul agentului utilizator) ? Eu vreau doar să obțin valoarea foii de stil. –  > Por Navin Rauniyar.
  • @NavinRauniyar: Nu sunt sigur că înțeleg întrebarea care „it”? Dacă vă referiți la style proprietate, atunci nu, nu o face. Dacă vă referiți la getComputedStyle/currentStyle, , atunci da, are. –  > Por T.J. Crowder.
  • Vreau să spun: ca și cum browserele au valoarea implicită display:block pe care nu vreau să o primesc, ci doar să primesc doar valoarea din foaia mea de stil –  > Por Navin Rauniyar.
  • @NavinRauniyar: Foarte dificil de făcut acest lucru (includeți întotdeauna astfel de informații în întrebare! Am actualizat-o). Consultați răspunsul actualizat. –  > Por T.J. Crowder.
  • Doar pentru a împărți puțin părul aici; getComputedStyle() nu vă va oferi valoarea proprietății css, ci stilul calculat. Acest lucru nu va face o diferență în cazul culorii de fundal, dar va face o diferență dacă sunteți în căutarea unei dimensiuni sau a unei poziții care este setată ca un procent. –  > Por Hal Carleton.
jaakkoj

Utilizați acest cod:

window.getComputedStyle(document.getElementById('test')).getPropertyValue("background-color")

Sper că acest lucru poate fi util