Tengo una determinada hoja de estilo para un div. Ahora quiero modificar un atributo de div dinámicamente usando js.Cambiar el atributo de estilo de elemento dinámicamente usando JavaScript
¿Cómo puedo hacerlo?
document.getElementById("xyz").style.padding-top = "10px";
¿Es esto correcto?
es casi correcta.
Dado que el - es un operador de JavaScript, realmente no puede tener eso en los nombres de las propiedades. Si estuviera configurando, border o algo así, su código funcionaría bien.
Sin embargo, lo que necesita recordar para padding-top, y para cualquier nombre de atributo con guiones, es que en javascript, quite el guión y haga que la siguiente letra en mayúscula, en su caso sería paddingTop.
Existen otras excepciones. JavaScript tiene algunas palabras reservadas, por lo que no puede establecer float así, por ejemplo. En cambio, en algunos navegadores debe usar cssFloat y en otros styleFloat. Es para discrepancias como esta que se recomienda que utilice un marco como jQuery, que maneja las incompatibilidades del navegador para usted ...
Asumiendo que tiene HTML así:
<div id='thediv'></div>
Si desea modificar el atributo de estilo de este div, que tendría que utilizar
document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'
Reemplazar [ATTRIBUTE] con el estilo de atributos que desea. Recuerde eliminar '-' y hacer mayúscula la siguiente letra.
Ejemplos
document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding
Además de otras respuestas, si desea usar la notación del guion para las propiedades del estilo, también se puede utilizar:
document.getElementById("xyz").style["padding-top"] = "10px";
+1 No estaba al tanto de eso. Eso es genial –
Yo tampoco, esto es realmente útil para funciones dinámicas, uno puede pasar el estilo como un valor de cadena, luego establecer el estilo y el valor. Gran solución – raphie
Además, añadiendo a lo que dice @raphie, también puede usar 'document.getElementById (" xyz "). Style [" paddingTop "] = '10px''. – Toothbrush
resuelvo un problema similar con:
document.getElementById("xyz").style.padding = "10px 0 0 0";
Espero que ayude.
La desventaja de hacerlo de esta manera es que obtienes el relleno para otros lados establecido en '0'. Y a veces no quieres eso. –
document.getElementById("xyz").style.padding-top = '10px';
habrá
document.getElementById("xyz").style["paddingTop"] = '10px';
document.getElementById("xyz").setAttribute('style','padding-top:10px');
también haría el trabajo.
La desventaja de hacerlo de esta manera es que eliminas cualquier otro estilo en línea. Eso es porque estás reemplazando todo el valor del atributo. Supongo que obtener el estilo actual, buscar un valor existente para la propiedad que desea establecer y luego agregar/reemplazar por el valor deseado es una mejor solución. –
De acuerdo. Pero el OP necesitaba una solución más cercana a lo que ya estaba haciendo, que no tenía en cuenta su caso de uso. Esta es una de las formas más simples de lograr eso, pero seguramente no es la mejor. –
Recomendaría utilizar una función que acepte el elemento id y un objeto que contenga las propiedades de CSS para manejar esto. De esta forma puede escribir varios estilos a la vez y usar la sintaxis de propiedad de CSS estándar.
//function to handle multiple styles
function setStyle(elId, propertyObject) {
var el = document.getElementById(elId);
for (var property in propertyObject) {
el.style[property] = propertyObject[property];
}
}
setStyle('xyz', {'padding-top': '10px'});
Mejor aún podría almacenar los estilos en una variable, lo que facilitará mucho la administración de la propiedad, p.
var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);
Espero que ayude
También hay style.setProperty función:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
document.getElementById("xyz").style.setProperty('padding-top', '10px');
// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');
Como se indica en la respuesta aceptada, hay algunas excepciones. Me gusta 'flotar '. –