Aggiungi uno stile in linea usando Javascript


94

Sto tentando di aggiungere questo codice a un elemento div creato dinamicamente

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

Il codice in cui crea la dinamica divè

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

La mia idea è di aggiungere lo stile dopo < div class="well"ma non so come lo farei.


1
Che differenza fa? Lo stile in linea avrà sempre la massima specificità.
Amberlamps

poiché il div viene creato dinamicamente, non posso usare statico poiché è uno script di libreria Javascript completo
Curtis Crewe

Forse questo è un problema XY. Cosa stai cercando di ottenere? È nFilter.style.width = '330px'; nFilter.style.float = 'left';quello che stai cercando?
Amberlamps

Risposte:


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

Questo dovrebbe aggiungere uno stile in linea all'elemento.


38

Puoi farlo direttamente sullo stile:

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
Non lo stile CSS, ma la terza opzione con setAttribute ha funzionato perfettamente per me.
milkersarac,

16

Utilizzando jQuery:

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

Altrimenti:

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

dovrebbe funzionare


6
Non è necessario utilizzare JQuery in questo caso
Dharman

10
Fornisce una soluzione alternativa senza JQuery. Non vedo la necessità di un voto negativo.
Termato

La soluzione JS vanilla corretta e richiesta è la soluzione alternativa? Non quello che nessuno ha chiesto che riguarda una biblioteca che nessuno ha menzionato?
Silvio Langereis

14

Puoi provare con questo

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

Dovrebbe farlo per te.


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

Alcune persone hanno un esempio che mi piace usando setAttribute. Tuttavia, si presume che tu non abbia alcuno stile attualmente impostato. Forse farei qualcosa come:

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

Oppure trasformalo in una funzione di supporto come questa:

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

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

Questo assicura che tu possa aggiungere stili ad esso continuamente e non rimuoverà nessuno stile attualmente impostato aggiungendolo sempre agli stili correnti. Aggiunge anche un punto e virgola extra in modo che se uno stile ne manca uno, ne aggiungerà un altro per assicurarsi che sia completamente delimitato.


3

dovresti creare una classe CSS e .my_stylepoi usare.addClass('.mystyle')


3

Se non vuoi aggiungere ogni proprietà CSS riga per riga, puoi fare qualcosa del genere:

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

Prova qualcosa di simile

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

-1

Fallo con css ora che hai creato la classe. .well {larghezza: 330 px; galleggiante: sinistra; }

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.