Establecer propiedad CSS en Javascript?

162

He creado lo siguiente ...

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

¿Cómo establecería ahora los atributos CSS, por ejemplo width: 100px?

javascript css

— Skizit
fuente

253

Uso element.style:

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

— KJYe.Name 葉家仁
fuente

14

¿Qué pasa con los no oficiales como -webkit-background-size? ¿Hay alguna manera de configurarlos con js simples o tenemos que usar jQuery?

— Lucas

6060

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

— Daniel X Moore

Esto realmente estiliza el elemento en el elemento y no en la hoja de estilo.

— Aft3rL1f3

56

Solo configura el style:

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

O si lo desea, puede usar jQuery :

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

— djdd87
fuente

55

@Sime: mis citas no son inconsistentes. Siempre uso comillas dobles para JS, ya que ese es el estándar en el trabajo. De todos modos, la primera línea tenía comillas simples cuando la copié de la pregunta de los OP. Corregido ahora de todos modos.

— djdd87

1

Bueno, ahora están bien, pero eran inconsistentes en el momento de mi comentario:)

— Šime Vidas

2

@Sime: reconocí que: "De todos modos, la primera línea tenía comillas simples cuando la copié de la pregunta de los OP. Corregida ahora de todos modos".

— djdd87

35

Para la mayoría de los estilos, haga esto:

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

Para los estilos que tienen guiones en el nombre, haga esto:

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

— Daniel X Moore
fuente

17

Eso es realmente bastante simple con JavaScript vainilla:

menu.style.width = "100px";

— Justin Niessner
fuente

14

Todas las respuestas le dicen correctamente cómo hacer lo que pidió, pero le recomendaría usar JavaScript para establecer una clase en el elemento y darle estilo mediante CSS. De esa manera, mantienes la separación correcta entre comportamiento y estilo.

Imagínese si tiene un diseñador para cambiar el estilo del sitio ... ellos deberían poder trabajar puramente en CSS sin tener que trabajar con su JavaScript.

En prototipo haría:

$(newElement).addClassName('blah')

— Mella
fuente

1

+1 de mi parte: mucho más fácil / más limpio para mantener todo tu CSS separado.

— Ian Oxley

1

Versión jQuery de esto para referencia ...$(selector).addClass('blah')

— zgr024

8

Solo para personas que quieren hacer lo mismo en 2018

Puede asignar una propiedad personalizada de CSS a su elemento (a través de CSS o JS) y cambiarlo:

Asignación a través de CSS:

element {
  --element-width: 300px;

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

Asignación a través de JS

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

Obtenga valor de la propiedad a través de JS

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

Aquí enlaces útiles:

— Mattia Astorino
fuente

6

Al depurar, me gusta poder agregar un montón de atributos css en una línea:

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

Acostumbrándose a este estilo, puede agregar un montón de CSS en una línea de esta manera:

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

— una fábula
fuente

5

si desea agregar una propiedad global, puede usar:

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

— Hetdev
fuente

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
fuente

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
fuente

1

Esto funciona bien con la mayoría de las propiedades CSS si no hay guiones en ellas.

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

Para las propiedades con guiones en ellas max-width, como , debe convertir el sausage-caseacamelCase

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

— Daut
fuente

0

Es importante comprender que el siguiente código no cambia la hoja de estilo, sino que cambia el DOM:

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

El DOM almacena un valor calculado de las propiedades del elemento de la hoja de estilo, y cuando cambia dinámicamente un estilo de elementos usando Javascript, está cambiando el DOM. Es importante tener esto en cuenta y comprenderlo porque la forma en que escribe su código puede afectar su dinámica. Si intenta obtener valores que no se escribieron directamente en el elemento en sí, así ...

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

... devolverá un valor indefinido que se almacenará en la variable 'propertyValue' del ejemplo de código. Si está trabajando para obtener y establecer propiedades que se escribieron dentro de una hoja de estilo CSS y desea una SINGLE FUNCTION que obtenga, así como establecer valores de propiedades de estilo en esta situación, que es una situación muy común, entonces tienes que usar JQuery.

$(selector).css(property,value)

El único inconveniente es que debes conocer JQuery, pero esta es honestamente una de las muchas buenas razones por las que todo desarrollador de Javascript debería aprender JQuery. Si desea obtener una propiedad CSS que se calculó a partir de una hoja de estilo en JavaScript puro, debe usarla.

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

La desventaja de este método es que el método getComputedValue solo obtiene, no se establece. La opinión de Mozilla sobre los valores calculados Este enlace profundiza más sobre lo que he abordado aquí. ¡¡¡Espero que esto ayude a alguien!!!

— Aft3rL1f3
fuente

¿Creo que a tu primer bloque de código le falta el contenido?

— zb226

1

Ahí está arreglado

— Aft3rL1f3