Definir propriedade CSS em Javascript?

160

Eu criei o seguinte ...

var menu = document.createElement('select');

Como eu definiria agora atributos CSS, por exemplo width: 100px?

javascript css

— Skizit
fonte

251

Use element.style:

var element = document.createElement('select');
element.style.width = "100px";

— KJYe.Name 葉家仁
fonte

14

E os não oficiais, como -webkit-background-size? Existe uma maneira de configurá-los com js simples ou precisamos usar o jQuery?

— Luke

60

@Luke obj.style ["- webkit-background-size"] = "400px"

— Daniel X Moore

Na verdade, isso estiliza o elemento no elemento e não na folha de estilo.

— Aft3rL1f3 17/01

56

Basta definir o style:

var menu = document.createElement("select");
menu.style.width = "100px";

Ou, se quiser, você pode usar o jQuery :

$(menu).css("width", "100px");

— djdd87
fonte

5

@ Time - Minhas citações não são inconsistentes. Eu sempre uso aspas duplas para JS, pois esse é o padrão no trabalho. De qualquer forma, a primeira linha tinha aspas simples enquanto eu a copiava da pergunta dos OPs. Corrigido agora de qualquer maneira.

— djdd87

1

Bem, eles estão OK agora, mas eles eram inconsistentes na época do meu comentário:)

— Šime Vidas

2

@Sime - eu reconheci que: "De qualquer forma, a primeira linha tinha aspas simples enquanto eu a copiava da pergunta dos OPs. Corrigida agora de qualquer maneira."

— djdd87

35

Para a maioria dos estilos, faça o seguinte:

var obj = document.createElement('select');
obj.style.width= "100px";

Para estilos com hífens no nome, faça o seguinte:

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

— Daniel X Moore
fonte

17

Isso é bastante simples com o JavaScript baunilha:

menu.style.width = "100px";

— Justin Niessner
fonte

14

Todas as respostas informam corretamente como fazer o que você pediu, mas eu aconselho usar o JavaScript para definir uma classe no elemento e estilizá-lo usando CSS. Dessa forma, você mantém a separação correta entre comportamento e estilo.

Imagine se você contratou um designer para reformular o estilo do site ... ele deve funcionar puramente em CSS sem precisar trabalhar com seu JavaScript.

No protótipo, eu faria:

$(newElement).addClassName('blah')

— usuario
fonte

1

+1 de mim - muito mais fácil / mais limpo para manter todo o seu CSS separado.

— Ian Oxley

1

Versão jQuery para referência ...$(selector).addClass('blah')

— zgr024 5/13

8

Apenas para pessoas que querem fazer a mesma coisa em 2018

Você pode atribuir uma propriedade customizada CSS ao seu elemento (por meio de CSS ou JS) e alterá-la:

Atribuição por CSS:

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

Atribuição através de JS

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

Obter valor da propriedade por meio de JS

ELEMENT.style.getPropertyValue('--element-width');

Aqui links úteis:

— Mattia Astorino
fonte

6

Ao depurar, gosto de poder adicionar vários atributos de css em uma linha:

menu.style.cssText = 'width: 100px';

Se acostumando com esse estilo, você pode adicionar um monte de css em uma linha da seguinte maneira:

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

— uma fabula
fonte

5

Se você deseja adicionar uma propriedade global, pode usar:

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

— Hetdev
fonte

3

<h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>

— Mohsin Khan
fonte

1

<body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>

— Mohsin Khan
fonte

1

Isso funciona bem com a maioria das propriedades CSS, se não houver hífens.

var element = document.createElement('select');
element.style.width = "100px";

Para propriedades com hífens max-width, como , você deve converter o valor sausage-caseparacamelCase

var element = document.createElement('select');
element.style.maxWidth = "100px";

— Daut
fonte

0

É importante entender que o código abaixo não altera a folha de estilo, mas altera o DOM:

document.getElementById("p2").style.color = "blue";

O DOM armazena um valor calculado das propriedades do elemento da folha de estilo e, quando você altera dinamicamente um estilo de elementos usando Javascript, está alterando o DOM. É importante observar e entender, porque a maneira como você escreve seu código pode afetar sua dinâmica. Se você tentar obter valores que não foram gravados diretamente no próprio elemento, assim ...

let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];

... você retornará um valor indefinido que será armazenado na variável 'propertyValue' do exemplo de código. Se você está trabalhando para obter e definir propriedades que foram escritas em uma folha de estilo CSS e deseja uma ÚNICA FUNÇÃO que receba, além de definir valores de propriedade de estilo nessa situação, que é uma situação muito comum, então você precisa usar o JQuery.

$(selector).css(property,value)

A única desvantagem é que você conhece o JQuery, mas essa é honestamente uma das muitas boas razões para que todo desenvolvedor Javascript deva aprender o JQuery. Se você deseja obter uma propriedade CSS calculada a partir de uma folha de estilos em JavaScript puro, é necessário usá-la.

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

A desvantagem desse método é que o método getComputedValue apenas obtém, não é definido. A opinião dos valores computados da Mozilla Este link aborda mais profundamente o que abordamos aqui. Espero que isso ajude alguém !!!

— Aft3rL1f3
fonte

Eu acho que o seu primeiro bloco de código está faltando o conteúdo?

— zb226 19/03

1

Não é fixo

— Aft3rL1f3 19/03