Fügen Sie einen Inline-Stil mit Javascript hinzu

Ich versuche, diesen Code einem dynamisch erstellten div-Element hinzuzufügen

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

Der Code, in dem die Dynamik erstellt wird, divlautet

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

Meine Idee ist es, den Stil danach hinzuzufügen, < div class="well"aber ich weiß nicht, wie ich es machen würde.

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

Dies sollte dem Element einen Inline-Stil hinzufügen.

Sie können es direkt auf dem Stil tun:

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

Verwenden von jQuery:

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

Andernfalls :

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

sollte arbeiten

Sie können es damit versuchen

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

Das sollte es für dich tun.

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

Einige Leute haben ein Beispiel mit setAttribute, das mir gefällt. Es wird jedoch davon ausgegangen, dass derzeit keine Stile festgelegt sind. Ich würde vielleicht so etwas machen wie:

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

Oder machen Sie es zu einer Hilfsfunktion wie dieser:

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

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

Dadurch wird sichergestellt, dass Sie kontinuierlich Stile hinzufügen können, und es werden keine derzeit festgelegten Stile entfernt, indem immer an die aktuellen Stile angehängt wird. Außerdem wird ein zusätzliches Semikolon hinzugefügt, sodass bei einem fehlenden Stil ein anderer angehängt wird, um sicherzustellen, dass er vollständig abgegrenzt ist.

Sie sollten eine CSS-Klasse erstellen und .my_styledann verwenden.addClass('.mystyle')

Wenn Sie nicht jede CSS-Eigenschaft zeilenweise hinzufügen möchten, können Sie Folgendes tun:

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

Verwenden Sie cssText

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

Versuchen Sie so etwas

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

Machen Sie es jetzt mit CSS, nachdem Sie die Klasse erstellt haben. .well {width: 330px; float: left; }}