0
136
Views¿Las propiedades del objeto Javascript Element.style CSSStyleDeclaration parecen extrañas?
Digamos que tengo un botón en un archivo HTML,
<button id="btn">Click Me</button>Use JavaScript para cambiar el color de ese botón a rojo.
const btn = document.querySelector('#btn'); btn.style['background-color'] = 'red'; Luego revisé btn.style['background-color'] . Mostró red .
btn.addEventListener('click', () => { console.log(`This button is in ${btn.style['background-color']}`) }); Así que esperaba que mi objeto btn.style se viera así,
{ ... , "background-color": "red", ... } Pero cuando los imprimo en la consola, ¿por qué el par clave-valor es 0: "background-color" y dónde está el valor red ?
btn.addEventListener('click', () => console.dir(btn.style)); 
·
Santiago Trujillo
1 answers
Answer question0
El objeto CSSStyleDeclaration es un poco exótico. Si observa btn.style["background-color"] o btn.style.backgroundColor directamente, verá red (o alguna representación de rojo, varía según el navegador).
const btn = document.querySelector('#btn'); btn.style['background-color'] = 'red'; btn.addEventListener('click', () => { console.log(btn.style["background-color"]); console.log(btn.style.backgroundColor); }); <button id="btn">Click Me</button> En la salida de la consola que mostró, lo encontrará en backgroundColor :
·
Santiago Trujillo
Report
Answer question