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

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?

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 ...

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";

Resuelvo un problema similar con:

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

Espero que ayude.

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');

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

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

estarán

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

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

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";

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

también haría el trabajo.

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

funciona para mi