Javascript kullanarak satır içi stil ekleyin

Bu kodu dinamik olarak oluşturulmuş bir div öğesine eklemeye çalışıyorum

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

Kod hangi dinamik yaratır divolduğunu

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

Benim fikrim stili sonradan eklemek < div class="well"ama nasıl yapardım bilmiyorum.

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

Bu, öğeye bir satır içi stil eklemelidir.

Bunu doğrudan stil üzerinde yapabilirsiniz:

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

JQuery kullanarak:

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

Aksi takdirde :

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

çalışmalı

Bununla deneyebilirsin

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

Bunu senin için yapmalı.

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

Birkaç kişinin sevdiğim setAttribute kullanan bir örneği var. Ancak, şu anda ayarlanmış herhangi bir stilinizin olmadığını varsayar. Belki şöyle bir şey yapardım:

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

Veya aşağıdaki gibi yardımcı bir işleve dönüştürün:

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

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

Bu, ona sürekli olarak stiller ekleyebilmenizi sağlar ve her zaman mevcut stillere ekleyerek o anda ayarlanmış herhangi bir stili kaldırmaz. Aynı zamanda fazladan bir noktalı virgül ekler, böylece eksik bir stil varsa, tamamen sınırlandırıldığından emin olmak için bir tane daha ekler.

bir css sınıfı yapmalı ve .my_stylesonra kullanmalısınız.addClass('.mystyle')

Her css özelliğini satır satır eklemek istemiyorsanız, bunun gibi bir şey yapabilirsiniz:

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

CssText kullanın

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

Bunun gibi bir şey dene

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

Sınıfı oluşturduğunuza göre bunu css ile yapın. .well {genişlik: 330px; şamandıra: sol; }