Tambahkan gaya sebaris menggunakan Javascript

94

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.

Curtis Crewe
sumber
1
Apa bedanya? Gaya sebaris akan selalu memiliki kekhususan tertinggi.
Amberlamps
karena div dibuat secara dinamis, saya tidak dapat menggunakan statis karena ini adalah skrip perpustakaan Javascript lengkap
Curtis Crewe
Mungkin ini masalah XY. Apa yang ingin Anda capai? Apa nFilter.style.width = '330px'; nFilter.style.float = 'left';yang kamu cari?
Amberlamps

Jawaban:

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

Ini harus menambahkan gaya sebaris ke elemen.

Dharman
sumber
38

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;");
Mario S
sumber
6
Bukan gaya CSS tetapi opsi ketiga dengan setAttribute bekerja sempurna untuk saya.
milkersarac
16

Menggunakan jQuery:

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

Jika tidak :

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

harus bekerja

Jean-Georges
sumber
6
Dalam kasus ini, tidak perlu menggunakan JQuery
Dharman
10
Dia memberikan solusi alternatif tanpa JQuery. Tidak melihat perlunya suara negatif.
Termato
Solusi vanilla JS yang benar dan diminta adalah solusi alternatif? Bukan orang yang tidak diminta siapa pun yang melibatkan perpustakaan yang tidak disebutkan siapa pun?
Silvio Langereis
14

Anda bisa mencoba dengan ini

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

Itu harus dilakukan untuk Anda.

Hector Romero
sumber
10
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);
James Kyburz
sumber
7

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.

stuyam
sumber
3

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

bennett_an
sumber
3

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

Vincurekf
sumber
1

Gunakan cssText

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

Cobalah sesuatu seperti ini

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

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

Seth K
sumber