css - Lägga till inline-stil med JavaScript

Jag försöker lägga till denna kod i ett dynamiskt skapat div-element

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

Koden som skapar den dynamiska div är

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

Min idé är att lägga till stilen efter < div class="well" men jag vet inte hur jag skulle göra det.

Svar #1

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

Detta bör lägga till en inbäddad stil på elementet.

De flesta CSS-namn mappas 1:1 till JavaScript-egenskapen. CSS-egenskaper med bindestreck i sina namn konverteras till camel case. För mer information, se den blå informationsrutan på https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Svar #2

Du kan göra det direkt på stilen:

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

Svar #3

Använder jQuery :

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

Annars :

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

borde fungera

Svar #4

Du kan prova med det här

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

Det borde räcka för dig.

Svar #5

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

Svar #6

Några personer har ett exempel som använder setAttribute som jag gillar. Dock antar det att du inte har några stilar inställda för närvarande. Jag skulle kanske göra något som:

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

Eller gör det till en hjälpfunktion på det här sättet:

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

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

Detta säkerställer att du kontinuerligt kan lägga till stilar till det och det tar inte bort någon stil som redan är inställd genom att alltid lägga till till de nuvarande stilarna. Det lägger också till ett extra semikolon så att om det någonsin saknas en stil kommer det att lägga till ett till för att säkerställa att det är helt avgränsat.

Relaterade artiklar