Tambahkan gaya sebaris menggunakan Javascript

Saya mencoba menambahkan kode ini ke elemen div yang dibuat secara dinamis

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

Kode yang menciptakan dinamika divadalah

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

Ide saya adalah menambahkan gaya setelahnya < div class="well"tetapi saya tidak tahu bagaimana saya melakukannya.

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

Ini harus menambahkan gaya sebaris ke elemen.

Anda dapat melakukannya langsung pada gaya:

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

Menggunakan jQuery:

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

Jika tidak :

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

harus bekerja

Anda bisa mencoba dengan ini

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

Itu harus dilakukan untuk Anda.

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

Beberapa orang memiliki contoh menggunakan setAttribute yang saya suka. Namun ini mengasumsikan Anda tidak memiliki gaya apa pun yang saat ini disetel. Saya mungkin akan melakukan sesuatu seperti:

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

Atau jadikan sebagai fungsi pembantu seperti ini:

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

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

Ini memastikan bahwa Anda dapat menambahkan gaya ke dalamnya secara terus menerus dan tidak akan menghapus gaya apa pun yang saat ini disetel dengan selalu menambahkan gaya saat ini. Ia juga menambahkan titik koma ekstra sehingga jika ada gaya yang hilang, ia akan menambahkan gaya lain untuk memastikannya sepenuhnya dibatasi.

Anda harus membuat kelas css .my_stylelalu gunakan.addClass('.mystyle')

Jika Anda tidak ingin menambahkan setiap properti css baris demi baris, Anda dapat melakukan sesuatu seperti ini:

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

Gunakan cssText

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

Cobalah sesuatu seperti ini

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

Lakukan dengan css sekarang setelah Anda membuat kelas. .well {width: 330px; float: kiri; }