Adicionar estilo embutido usando Javascript


94

Estou tentando adicionar este código a um elemento div criado dinamicamente

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

O código no qual cria a dinâmica divé

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

Minha ideia é adicionar o estilo depois, < div class="well"mas não sei como faria isso.


1
Que diferença faz? O estilo embutido sempre terá a especificidade mais alta.
Amberlamps de

como o div é criado dinamicamente, não posso usar estático, pois é um script de biblioteca Javascript completo
Curtis Crewe

Talvez este seja um problema XY. O que você está tentando alcançar? É o nFilter.style.width = '330px'; nFilter.style.float = 'left';que você está procurando?
Amberlamps de

Respostas:


130
nFilter.style.width = '330px';
nFilter.style.float = 'left';

Isso deve adicionar um estilo embutido ao elemento.


38

Você pode fazer isso diretamente no estilo:

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

// Css styling
nFilter.style.width = "330px";
nFilter.style.float = "left";

// or
nFilter.setAttribute("style", "width:330px;float:left;");

6
Não o estilo CSS, mas a terceira opção com setAttribute funcionou perfeitamente para mim.
milkersarac

16

Usando jQuery:

$(nFilter).attr("style","whatever");

De outra forma :

nFilter.setAttribute("style", "whatever");

Deveria trabalhar


6
Não é necessário usar JQuery neste caso
Dharman

10
Ele oferece uma solução alternativa sem JQuery. Não vejo a necessidade de um voto negativo.
Termato

A solução JS vanilla correta e solicitada é a solução alternativa? Não aquele que ninguém pediu que envolve uma biblioteca que ninguém mencionou?
Silvio Langereis

14

Você pode tentar com isso

nFilter.style.cssText = 'width:330px;float:left;';

Isso deve bastar para você.


10
var div = document.createElement('div');
div.setAttribute('style', 'width:330px; float:left');
div.setAttribute('class', 'well');
var label = document.createElement('label');
label.innerHTML = 'YOUR TEXT HERE';
div.appendChild(label);

7

Algumas pessoas têm um exemplo usando setAttribute que eu gosto. No entanto, assume que você não tem nenhum estilo definido atualmente. Eu talvez faria algo como:

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

Ou transforme-o em uma função auxiliar como esta:

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

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

Isso garante que você possa adicionar estilos a ele continuamente e não removerá nenhum estilo atualmente definido, sempre anexando aos estilos atuais. Ele também adiciona um ponto e vírgula extra de forma que, se houver um estilo faltando um, ele anexará outro para garantir que esteja totalmente delimitado.


3

você deve fazer uma classe css .my_stylee usar.addClass('.mystyle')


3

Se você não deseja adicionar cada propriedade css linha por linha, você pode fazer algo assim:

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



1

Tente algo assim

document.getElementById("vid-holder").style.width=300 + "px";

-1

Faça isso com css agora que você criou a classe. .well {largura: 330px; flutuar: esquerda; }

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.