Alterar o atributo de estilo do elemento dinamicamente usando JavaScript

Eu tenho uma certa folha de estilo para um div. Agora eu quero modificar um atributo de div dinamicamente usando js.

Como eu posso fazer isso?

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

Isso está correto?

Está quase correto.

Como -é um operador javascript, você realmente não pode ter isso em nomes de propriedades. Se você estivesse definindo,border ou algo parecido com uma única palavra, seu código funcionaria bem.

No entanto, o que você precisa lembrar padding-top, e para qualquer nome de atributo hifenizado, é que em javascript, você remove o hífen e torna a próxima letra maiúscula, então no seu caso seria paddingTop.

Existem algumas outras exceções. JavaScript tem algumas palavras reservadas, então você não pode definir floatassim, por exemplo. Em vez disso, em alguns navegadores você precisa usar cssFloate em outros styleFloat. É para discrepâncias como essa que é recomendado que você use um framework como o jQuery, que lida com as incompatibilidades do navegador para você ...

Além de outras respostas, se você quiser usar a notificação de travessão para propriedades de estilo, também pode usar:

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

Resolvo problema semelhante com:

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

Espero que ajude.

Também existe a style.setPropertyfunção:
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');

Supondo que você tenha um HTML como este:

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

Se você quiser modificar o atributo de estilo deste div, use

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

Substitua [ATTRIBUTE]pelo atributo de estilo que você deseja. Lembre-se de remover '-' e colocar a seguinte letra em maiúscula.

Exemplos

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

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

será

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

Eu recomendaria usar uma função, que aceita o id do elemento e um objeto contendo as propriedades CSS, para lidar com isso. Dessa forma, você escreve vários estilos de uma vez e usa a sintaxe de propriedade CSS padrão.

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

Melhor ainda, você pode armazenar os estilos em uma variável, o que tornará o gerenciamento da propriedade muito mais fácil, por exemplo

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

espero que ajude

Fiquei surpreso por não ter visto a solução do seletor de consulta abaixo ,

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

Soluções CSSStyleDeclaration , um exemplo de resposta aceita

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

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

também faria o trabalho.

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

funciona para mim