Thêm kiểu nội tuyến bằng Javascript

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

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

Mã tạo ra động divlà

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

Ý tưởng của tôi là thêm kiểu sau < div class="well"nhưng tôi không biết mình sẽ làm như thế nào.

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

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

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

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

Sử dụng jQuery:

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

Nếu không thì :

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

nên làm việc

Bạn có thể thử với cái này

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

Chuyện đó nên làm vì bạn.

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

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 rằng bạn không có bất kỳ kiểu nào hiện được đặt. Tôi có thể sẽ làm một cái gì đó như:

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

Hoặc biến nó thành một chức năng trợ giúp 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 các kiểu liên tục và nó sẽ không xóa bất kỳ kiểu nào hiện được đặt bằng cách luôn thêm vào các kiểu hiện tại. Nó cũng thêm một dấu chấm phẩy bổ sung để nếu có một kiểu nào đó bị thiếu, nó sẽ nối một kiểu khác để đảm bảo rằng nó được phân tách hoàn toàn.

bạn nên tạo một lớp css .my_stylesau đó sử dụng.addClass('.mystyle')

Nếu bạn không muốn thêm từng dòng thuộc tính css theo từng dòng, bạn có thể làm như sau:

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

Sử dụng cssText

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

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

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

Làm điều đó với css bây giờ bạn đã tạo lớp học. .well {width: 330px; float: trái; }