Dodaj styl inline przy użyciu JavaScript

Question

Ja próbuje dodać ten kod do dynamicznie utworzony elementu div

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

kodu, w której tworzy dynamiczny div jest

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

Mój pomysł jest dodanie styl po < div class="well", ale nie wiem, jak bym to zrobił.

Answer 1

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

Powinno to dodać do tego elementu styl śródliniowy.

Answer 2

należy dokonać klasy css .my_style następnie użyć .addClass('.mystyle')

Answer 3

Zrób to z css teraz, że utworzyliśmy klasę. .well { szerokość: 330 pikseli; float: left; }

Answer 4

jQuery:

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

inaczej:

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

powinien działać

Answer 5

Można to zrobić bezpośrednio na styl:

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

Answer 6

użytkowania cssText

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

Answer 7

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

Answer 8

Można spróbować z tego

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

To powinno zrobić to za Ciebie.

Answer 9

spróbować czegoś tak

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

Answer 10

Jeśli nie chcesz, aby dodać każdy wiersz po wierszu właściwości CSS, można zrobić coś takiego:

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

Answer 11

Kilka osób ma przykład, używając setAttribute, który mi się podoba. Zakłada się jednak, że nie masz aktualnie ustawionych stylów. ja może zrobić coś takiego:

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

lub uczynić go do funkcji pomocniczych, takich jak ten:

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

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

Daje to pewność, że można do niego dodać style ciągły i nie będzie usunąć styl obecnie ustawiane przez ciągłe dołączanie do bieżących stylów. Dodaje również dodatkowy średnik, więc jeśli brakuje stylu, to doda inny, aby upewnić się, że jest w pełni rozdzielony.