Cambiar el atributo de estilo del elemento dinámicamente usando JavaScript

117

Tengo una determinada hoja de estilo para un div. Ahora quiero modificar un atributo de div dinámicamente usando js.

¿Cómo puedo hacerlo?

document.getElementById("xyz").style.padding-top = "10px";

¿Es esto correcto?

javascript html css

— jslearner
fuente

123

Es casi correcto.

Dado que -es un operador de JavaScript, realmente no puede tener eso en los nombres de propiedad. Si estuviera configurando, bordero algo así en una sola palabra, su código funcionaría bien.

Sin embargo, lo que debe recordar padding-top, y para cualquier nombre de atributo con guión, es que en javascript, elimina el guión y convierte la siguiente letra en mayúscula, por lo que en su caso sería así paddingTop.

Hay algunas otras excepciones. JavaScript tiene algunas palabras reservadas, por lo que no puede configurarlo floatasí, por ejemplo. En cambio, en algunos navegadores es necesario utilizar cssFloaty en otros styleFloat. Es para discrepancias como esta que se recomienda que utilice un marco como jQuery, que maneja las incompatibilidades del navegador por usted ...

— David Hedlund
fuente

213

Además de otras respuestas, si desea usar la notación de guión para las propiedades de estilo, también puede usar:

document.getElementById("xyz").style["padding-top"] = "10px";

— KooiInc
fuente

3

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 solucion

— raphie

1

Además, agregando a lo que dice @raphie, también puede usar document.getElementById("xyz").style["paddingTop"] = '10px'.

— Cepillo de dientes

1

@anunkjn: tienes razón. Yo diría que no funciona más en FF. Lo cual es, bueno ... extraño.

— KooiInc

17

Resuelvo un problema similar con:

document.getElementById("xyz").style.padding = "10px 0 0 0";

Espero que ayude.

— silla
fuente

2

La desventaja de hacerlo de esta manera es que se configura el relleno para los otros lados 0. Y a veces no quieres eso.

— Gustavo Straube

17

También hay style.setPropertyfunció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');

— icl7126
fuente

15

Suponiendo que tenga HTML como este:

<div id='thediv'></div>

Si desea modificar el atributo de estilo de este div, usaría

document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'

Reemplace [ATTRIBUTE]con el atributo de estilo que desee. Recuerde eliminar '-' y poner la siguiente letra en mayúscula.

Ejemplos

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

— JohnP
fuente

1

Como se indica en la respuesta aceptada, existen algunas excepciones. Al igual float.

— Gustavo Straube

8

document.getElementById("xyz").style.padding-top = '10px';

estarán

document.getElementById("xyz").style["paddingTop"] = '10px';

— T.Todua
fuente

7

Recomendaría usar una función, que acepte la identificación del elemento y un objeto que contenga las propiedades CSS, para manejar esto. De esta manera, escribe varios estilos a la vez y usa la sintaxis de propiedad 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, puede almacenar los estilos en una variable, lo que facilitará la administración de la propiedad, por ejemplo

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

Espero que ayude

— rjbultitude
fuente

7

Sorprendido de que no vi la siguiente solución del selector de consultas ,

document.querySelector('#xyz').style.paddingTop = "10px"

Soluciones CSSStyleDeclaration , un ejemplo de la respuesta aceptada

document.getElementById('xyz').style.paddingTop = "10px";

— Rama
fuente

5

document.getElementById("xyz").setAttribute('style','padding-top:10px');

también haría el trabajo.

— Pinkesh Badjatiya
fuente

5

La desventaja de hacerlo de esta manera es que elimina cualquier otro estilo en línea. Eso es porque está reemplazando todo el valor del atributo. Supongo que obtener el estilo actual, verificar un valor existente para la propiedad que desea establecer y luego agregar / reemplazar por el valor deseado es una mejor solución.

— Gustavo Straube

Convenido. 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 sencillas de lograrlo, pero seguramente no es la mejor.

— Pinkesh Badjatiya

@GustavoStraube, no lo llamaría un inconveniente. En muchos casos, esto es exactamente lo que el desarrollador quiere hacer, es decir, sobrescribir el estilo del elemento. Yo lo llamaría una consecuencia de hacerlo de esta manera.

— stwr667

5

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

funciona para mi

— Hyperion
fuente