hinzufügen Inline-Stil mit Javascript

Ich versuche, diesen Code zu einem dynamisch erstellt div Element, in demhinzufügen Inline-Stil mit Javascript

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

Der Code hinzuzufügen, erstellt der dynamische div

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

ist meine Idee hinzuzufügen ist der Stil nach < div class="well", aber ich weiß nicht, wie ich es tun würde.

Quelle

2013-02-07 Curtis Crewe

Welchen Unterschied macht es? Inline-Stil wird immer die höchste Spezifität haben. – Amberlamps

Da das div dynamisch erstellt wird, kann ich nicht statisch verwenden, da es ein vollständiges JavaScript-Bibliotheksskript ist. –

Vielleicht ist das ein XY-Problem. Was versuchst du zu erreichen? Ist 'nFilter.style.width = '330px'; nFilter.style.float = 'left'; 'wonach suchst du? – Amberlamps

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

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

Quelle

2013-02-07 14:13:39 Dharman

sollten Sie eine CSS-Klasse .my_style dann .addClass('.mystyle')

Quelle

2013-02-07 14:14:21

es jetzt mit CSS verwenden Sie, dass Sie die Klasse erstellt haben. .well { Breite: 330px; Schwimmer: links; }

Quelle

2013-02-07 14:15:33

Mit jQuery:

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

Ansonsten:

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

sollte

Quelle

2013-02-07 14:15:36

Es ist unnötig, in diesem Fall JQuery zu verwenden – Dharman

Er gibt eine alternative Lösung ohne JQuery. Ich sehe keinen Bedarf für einen Downvote. – Termato

arbeiten Sie es auf den Stil direkt tun können:

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

Quelle

2013-02-07 14:15:42

Nicht das CSS-Styling, sondern die dritte Option mit setAttribute funktionierte perfekt für mich. – milkersarac

Verwenden cssText

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

Quelle

2013-02-07 14:15:54 marbor3

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

Quelle

2013-02-07 14:16:12

können Sie versuchen, mit diesem

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

, dass es für Sie tun sollten.

Quelle

2013-02-07 14:18:03

Funktioniert nicht, bis 'CSSRule' angewendet wird. – Praveen

Versuchen so etwas wie dieses

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

Quelle

2016-06-21 12:14:50

Wenn Sie nicht jede CSS-Eigenschaft Zeile für Zeile hinzufügen möchten, können Sie etwas 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);

Quelle

2017-01-17 09:31:23 Vincurekf

Ein paar Leute haben ein Beispiel mit setAttribute, das ich mag. Es wird jedoch davon ausgegangen, dass derzeit keine Stile festgelegt sind. Ich würde vielleicht so etwas wie:

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

oder in eine Hilfsfunktion wie diese machen:

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

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

Dies stellt sicher, dass Sie Stile kontinuierlich hinzufügen und es wird nicht jede mögliche Art entfernen Derzeit festgelegt, indem immer an die aktuellen Stile angefügt wird. Es fügt auch einen zusätzlichen Semikolon hinzu, so dass, wenn es einen Stil gibt, der jemals einen fehlt, ein anderer angefügt wird, um sicherzustellen, dass er vollständig abgegrenzt ist.

Quelle

2017-08-14 15:47:27 stuyam

hinzufügen Inline-Stil mit Javascript

Antwort

Verwandte Themen