Agregar estilo en línea usando Javascript

2 minutos de lectura

avatar de usuario
Curtis Crewe

Estoy intentando agregar este código a un elemento div creado dinámicamente

style = "width:330px;float:left;" 

El código en el que se crea la dinámica. div es

var nFilter = document.createElement('div');
nFilter.className="well";
nFilter.innerHTML = '<label>' + sSearchStr + '</label>';

Mi idea es agregar el estilo después < div class="well" pero no sé cómo lo haría.

  • ¿Qué diferencia hace? El estilo en línea siempre tendrá la mayor especificidad.

    – Lámparas de color ambar

    7 febrero 2013 a las 14:13


  • debido a que el div se crea dinámicamente, no puedo usar estático ya que es un script de biblioteca Javascript completo

    – Curtis Crewe

    7 febrero 2013 a las 14:14

  • Tal vez este es un problema XY. ¿Qué estás intentando lograr? Es nFilter.style.width = '330px'; nFilter.style.float = 'left'; ¿Qué estás buscando?

    – Lámparas de color ambar

    7 febrero 2013 a las 14:15

avatar de usuario
dharma

nFilter.style.width="330px";
nFilter.style.float="left";

Esto debería agregar un estilo en línea al elemento.

Si no desea agregar cada propiedad css línea por línea, puede hacer algo como esto:

document.body.insertAdjacentHTML('afterbegin','<div id="div"></div>');

/**
 * Add styles to DOM element
 * @element DOM element
 * @styles object with css styles
 */
function addStyles(element,styles){
  for(id in styles){
    element.style[id] = styles[id];
  }
}

// usage
var nFilter = document.getElementById('div');
var styles = {
  color: "red"
  ,width: "100px"
  ,height: "100px"
  ,display: "block"
  ,border: "1px solid blue"
}
addStyles(nFilter,styles);

  • esto es genial, me ayuda mucho a organizar mi código html css simple sin marco. ¡muchas gracias!

    – Jellytran

    24 de marzo a las 16:24


avatar de usuario
bennett_an

deberías hacer una clase css .my_style entonces usa .addClass('.mystyle')

  • esto es genial, me ayuda mucho a organizar mi código html css simple sin marco. ¡muchas gracias!

    – Jellytran

    24 de marzo a las 16:24


avatar de usuario
stuyam

Algunas personas tienen un ejemplo usando setAttribute que me gusta. Sin embargo, se supone que no tiene ningún estilo configurado actualmente. Tal vez haría algo como:

nFilter.setAttribute('style', nFilter.getAttribute('style') + ';width:330px;float:left;');

O conviértalo en una función auxiliar como esta:

function setStyle(el, css){
  el.setAttribute('style', el.getAttribute('style') + ';' + css);
}

setStyle(nFilter, 'width:330px;float:left;');

Esto asegura que pueda agregarle estilos continuamente y no eliminará ningún estilo establecido actualmente al agregar siempre a los estilos actuales. También agrega un punto y coma adicional para que, si falta un estilo, agregue otro para asegurarse de que esté completamente delimitado.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad