Thêm phong cách inline sử dụng Javascript

Question

Tôi đang cố gắng để thêm mã này vào một phần tử div động tạo

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

mã trong đó tạo ra động div là

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

Ý tưởng của tôi là thêm phong cách sau khi < div class="well" nhưng tôi không biết làm thế nào tôi muốn làm điều đó.

Answer 1

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

Điều này sẽ thêm kiểu nội tuyến vào phần tử.

Answer 2

bạn nên thực hiện một lớp css .my_style sau đó sử dụng .addClass('.mystyle')

Answer 3

Làm điều đó với css bây giờ mà bạn đã tạo ra lớp. .well { chiều rộng: 330px; float: left; }

Answer 4

Sử dụng jQuery:

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

Nếu không:

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

nên làm việc

Answer 5

Bạn có thể làm điều đó trực tiếp trên phong cách:

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

Sử dụng 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

Bạn có thể thử với điều này

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

Điều đó sẽ làm điều đó cho bạn.

Answer 9

Hãy thử một cái gì đó như thế này

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

Answer 10

Nếu bạn không muốn thêm mỗi dòng tài sản css bởi dòng, bạn có thể làm một cái gì đó như thế này:

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

Một vài người có một ví dụ sử dụng setAttribute mà tôi thích. Tuy nhiên, nó giả định bạn không có bất kỳ kiểu nào hiện được đặt. Tôi có lẽ sẽ làm một cái gì đó như:

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

Hoặc làm cho nó thành một hàm helper như thế này:

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

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

Điều này đảm bảo rằng bạn có thể thêm phong cách cho nó liên tục và nó sẽ không loại bỏ bất kỳ phong cách hiện được đặt bằng cách luôn gắn thêm vào các kiểu hiện tại. Nó cũng cho biết thêm một dấu chấm phẩy thêm để nếu có một phong cách bao giờ mất tích một nó sẽ nối thêm một để đảm bảo nó được phân định đầy đủ.