javascript - Setează mai multe valori pentru un atribut css

Este posibil să se seteze două valori pentru un singur atribut pe un ID CSS, de exemplu

înălțime: 12em; înălțime: 12rem;

pentru un singur id? Știu că este posibil să fac asta cu CSS, dar vreau să schimb înălțimea prin javascript și să am ambele valori într-un singur atribut, astfel încât 'em' să funcționeze ca o alternativă pentru browserele care nu suportă 'rem'.

Exemplu :

function updateHeight() {
  var testElem = document.getElementById("testId");
  testElem.style.height = "12em";
  testElem.style.height = "12rem";
  //testElem.style.height = "12em; 12rem;"; doesn't work, applies "12em"
}

#testId {
  height: 8em;
  height: 8rem;
  background-color: black;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="utf-8" />
</head>

<body>
  <div id="testId">
    BlaBla
  </div>
  <button onclick="updateHeight()">Bla</button>
</body>

</html>

Răspuns #1

Poți folosi în schimb o clasă

function updateHeight() {
  var testElem = document.getElementById("testId");
  testElem.classList.add('high');
}

#testId {
  height: 8em;
  height: 8rem;
  background-color: black;
  color: white;
}

#testId.high { /* remember that ID is more specific than class */
  height: 12em;
  height: 12rem;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="utf-8" />
</head>

<body>
  <div id="testId">
    BlaBla
  </div>
  <button onclick="updateHeight()">Bla</button>
</body>

</html>

Sau dacă valoarea este dinamică, probabil că ar trebui să introduci un tag de stil pentru a putea suporta cascada CSS

function updateHeight() {

  var value    = 12; // or something dynamic
  var styles   = '#testId {height: '+value+'em; height: '+value+'rem;}';
  var tag      = document.createElement('style');

  tag.innerHTML = styles;

  document.querySelector('head').appendChild(tag);

}

#testId {
  height: 8em;
  height: 8rem;
  background-color: black;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="utf-8" />
</head>

<body>
  <div id="testId">
    BlaBla
  </div>
  <button onclick="updateHeight()">Bla</button>
</body>

</html>

Răspunsul #2

Da, poți. Acest lucru este definit de Cascada CSS:

Fiecare declarație de proprietate aplicată unui element contribuie cu o valoare declarată pentru acea proprietate asociată elementului.

Aceste valori sunt apoi procesate de cascadă pentru a alege o singură „valoare câștigătoare”.

Valoarea cascadată reprezintă rezultatul cascadei: este valoarea declarată care câștigă cascadea (este sortată prima în rezultatul cascadei).

Apoi, dacă folosești

height: 8em;
height: 8rem;

vor fi 2 valori declarate pentru proprietatea height: 8em și 8rem. Cea din urmă va câștiga în cascadă, devenind valoarea cascadată.

Dacă un browser nu suportă unul dintre ele, celălalt va fi singura valoare declarată, deci va câștiga în cazcadă.

Dacă un browser nu acceptă niciunul dintre ele, rezultatul cascadei va fi lista goală și nu va exista nicio valoare cască. Valoarea specificată va fi rezultatul proceselor de inițializare implicită (valoarea inițială în acest caz, deoarece height nu este o proprietate moștenită).

Totuși, cu JavaScript există o problemă. setProperty, utilizat în fundal de proprietățile IDL camel case din .style, folosește algoritmul de setare a unei declarații CSS, care suprascrie declarațiile existente:

1. Dacă property se potrivește exact, ținând cont de majuscule și minuscule, cu numele unei proprietăți dintr-o declarație CSS din declarations, atunci să fie declaration acea declarație CSS.

2. În caz contrar, adaugă o nouă declarație CSS cu numele proprietății property la declarations și lasă ca declaration să fie acea declarație CSS.

Există câteva soluții alternative:

• Folosește cssText în locul atributelor IDL în camel case:

  testElem.style.cssText += "; height: 12em; height: 12rem; ";
  

• Verifică stilul după ce îl setezi. Dacă primești șirul gol, înseamnă că nu a fost recunoscut.

  testElem.style.height = "12rem";
  if(!testElem.style.height) testElem.style.height = "12em";
  

• Nu seta stilurile în declarația de stil inline. Creează un nou fișier de stiluri în schimb, sau adaugă o clasă la element pentru a declanșa niște CSS dintr-un fișier de stiluri existent.