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


94

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

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

ダイナミクスを作成するコードdiv

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

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


1
どんな違いがあるの?インラインスタイルは常に最高の特異性を持ちます。
アンバーランプ2013

divは動的に作成されるため、完全なJavascriptライブラリスクリプトであるため静的を使用できません
Curtis Crewe 2013

多分これはXYの問題です。何を達成しようとしていますか?nFilter.style.width = '330px'; nFilter.style.float = 'left';あなたが探しているものは何ですか?
アンバーランプ2013

回答:


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

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


38

あなたはスタイルで直接それをすることができます:

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

6
CSSスタイルではありませんが、setAttributeの3番目のオプションは私にとって完璧に機能しました。
milkersarac 2013

16

jQueryの使用:

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

そうでなければ :

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

動作するはずです


6
この場合、JQueryを使用する必要はありません
Dharman 2013

10
彼はJQueryなしで別の解決策を提供します。反対票の必要性を見ないでください。
termato 2015

要求された正しいバニラJSソリューションは代替ソリューションですか?誰もそれを求めなかったのは、誰も言及していない図書館に関係しているのではないでしょうか。
SilvioLangereis20年

14

あなたはこれで試すことができます

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

それはあなたのためにそれをするはずです。


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

7

私が好きな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

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


3

各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

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

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

-1

クラスを作成したので、cssでそれを行います。.well {width:330px; float:left; }

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.