Alterar o atributo de estilo do elemento dinamicamente usando JavaScript

117

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?

javascript html css

— jslearner
fonte

123

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

— David Hedlund
fonte

213

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

— KooiInc
fonte

3

Nem eu, isso é realmente útil para funções dinâmicas, pode-se passar o estilo como um valor de string e, em seguida, definir o estilo e o valor. Ótima solução.

— raphie

1

Além disso, acrescentando ao que @raphie diz, você também pode usar document.getElementById("xyz").style["paddingTop"] = '10px'.

— Escova de dentes de

1

@anunkjn: você está certo. Eu diria que não funciona mais no FF. O que é, bem ... estranho.

— KooiInc

17

Resolvo problema semelhante com:

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

Espero que ajude.

— Chairul
fonte

2

A desvantagem de fazer dessa maneira é definir o preenchimento dos outros lados como 0. E às vezes você não quer isso.

— Gustavo Straube

17

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

— icl7126
fonte

15

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

— JohnP
fonte

1

Conforme afirmado na resposta aceita, há algumas exceções. Gosto float.

— Gustavo Straube

8

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

será

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

— T.Todua
fonte

7

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

— rjbultitude
fonte

7

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

— Rama
fonte

5

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

também faria o trabalho.

— Pinkesh Badjatiya
fonte

5

A desvantagem de fazer isso é que você remove qualquer outro estilo embutido. Isso porque você está substituindo todo o valor do atributo. Acho que obter o estilo atual, verificar se há um valor existente para a propriedade que você deseja definir e, em seguida, adicionar / substituir pelo valor desejado é uma solução melhor.

— Gustavo Straube

Acordado. Mas o OP precisava de uma solução mais próxima do que ele já estava fazendo e que não levava em consideração o seu caso de uso. Esta é uma das maneiras mais simples de conseguir isso, mas certamente não é a melhor.

— Pinkesh Badjatiya

@GustavoStraube, eu não diria que é uma desvantagem. Em muitos casos, isso é exatamente o que o desenvolvedor deseja fazer - ou seja, sobrescrever o estilo do elemento. Eu diria que é uma consequência de fazer dessa maneira.

— stwr667

5

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

funciona para mim

— Hyperion
fonte