web-dev-qa-db-ja.com

JavaScriptを使用してインラインスタイルを追加する

このコードを動的に作成されたdiv要素に追加しようとしています

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

動的なdivを作成するコードは

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

私の考えは、< div class="well"の後にスタイルを追加することですが、どうすればいいのかわかりません。

javascriptcssinnerhtml
71
Curtis Crewe
nFilter.style.width='330px';
nFilter.style.float='left';

これにより、要素にインラインスタイルが追加されます。

105
Dharman

スタイルで直接行うことができます：

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;");
31
Mario Sannum

これで試すことができます

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

それはあなたのためにそれを行う必要があります。

9
Hector Romero

JQueryの使用：

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

さもないと ：

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

動作するはずです

9
Jean-Georges
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);
9
James Kyburz

私が好きなsetAttributeを使用した例が数人います。ただし、現在設定されているスタイルがないことを前提としています。私はおそらく次のようなことをするでしょう：

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

または、次のようなヘルパー関数にします。

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

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

これにより、スタイルを継続的に追加できるようになり、現在のスタイルに常に追加することで現在設定されているスタイルが削除されなくなります。また、余分なセミコロンが追加されるため、スタイルが不足している場合は、別のスタイルが追加されて完全に区切られます。

3
stuyam

cssクラスを.my_styleにしてから.addClass('.mystyle')を使用する必要があります

2
bennett_an

各cssプロパティを1行ずつ追加したくない場合は、次のようなことができます。

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

このようなものを試してください

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

クラスを作成したので、cssで実行してください。 .well {width：330px; float：left; }

0
Seth K

cssText を使用します

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