element.style.setProperty (proprietà, valore) vs element.style.property = valore [chiuso]

Question

element.style.setProperty (proprietà, valore) vs element.style.property = valore [chiuso]

#1 da (2 voti)

0

Mi chiedevo se dovrei usare element.style.setProperty(property, value) o element.style.property = value . Sono molto tentato di iniziare a usare element.style.setProperty(property, value) . Ma in quasi tutto il codice che vedo le persone usano la sintassi element.style.property= value . Quindi mi stavo chiedendo:

Qual è la migliore pratica?
Quali sono i vantaggi e gli svantaggi di ciascuna sintassi?

Di seguito alcuni esempi che applicano le diverse sintassi allo stesso codice.

Sintassi 1: element.style.property = valore

let element = document.getElementById('element');
element.addEventListener('click', () => {
  element.style.color = 'black';  
});

#element{
  height: 100px;
  color: transparent;
  border: 1px solid black;
  border-radius: 1rem;
  cursor: pointer;
}

<button id="element">After clicking you can read me!</button>

Sintassi 2: element.style.setProperty (proprietà, valore)

let element = document.getElementById('element');
element.addEventListener('click', () => {
  element.style.setProperty('color', 'black');  
});

#element{
  height: 100px;
  color: transparent;
  border: 1px solid black;
  border-radius: 1rem;
  cursor: pointer;
}

<button id="element">After clicking you can read me!</button>

javascript

posta RMo 13.03.2018 - 20:08

fonte

1 risposta

Leggi altre domande sui tag javascript

Differenza tra le eccezioni "Ducking" e "Swallowing" In GitHub Flow, perché è importante distribuire dopo push to master?

score 2 · Accepted Answer

Potrebbero non esserci differenze con il "colore", ma considera:

element.style.backgroundColor = 'blue' // works
element.style['backgroundColor'] = 'blue' // works
element.style['background-color'] = 'blue' // does not work

element.style.setProperty('background-color','blue') // works
element.style.setProperty('backgroundColor','blue') // does not work

'-' non è illegale nel nome di una proprietà, ma l'interprete penserà che significhi meno. Quindi le proprietà dell'oggetto stile non possono mappare direttamente ai nomi di proprietà css.

Sembra esserci qualche controversia sul modo "migliore" o "corretto" per fare riferimento alle proprietà css sull'oggetto style.

L'oggetto style ha una specifica e quella specifica elenca le proprietà come camelCase, ma l'argomento setProperty deve corrispondere al valore con trattino.