JavaScriptでCSSプロパティを設定しますか？

160

以下を作成しました...

var menu = document.createElement('select');

どうすればCSS属性を設定できますwidth: 100pxか？

javascript css

— スキジット
ソース

251

使用element.style：

var element = document.createElement('select');
element.style.width = "100px";

— KJYe.Name葉家仁
ソース

14

のような非公式のものは-webkit-background-sizeどうですか？これらをプレーンなjsで設定する方法はありますか、それともjQueryを使用する必要がありますか？

— ルーク

60

@Luke obj.style ["-webkit-background-size"] = "400px"

— Daniel X Moore

これは実際には、スタイルシートではなく、要素内の要素にスタイルを設定します。

— Aft3rL1f3

56

を設定するだけですstyle：

var menu = document.createElement("select");
menu.style.width = "100px";

または、必要に応じてjQueryを使用できます。

$(menu).css("width", "100px");

— djdd87
ソース

5

@Sime-私の引用には矛盾がありません。私は、JSが仕事での標準であるため、常に二重引用符を使用します。とにかく、OPの質問からコピーしたため、最初の行には単一引用符が含まれていました。とにかく今修正されました。

— djdd87

1

まあ、彼らがしているOKになりましたが、彼らは私のコメントの時に矛盾した:)

— サイムVIDAS

2

@Sime-私はそれを確認しました：「とにかく、最初の行にはOPの質問からコピーしたため、一重引用符がありました。とにかく修正されました。」

— djdd87

35

ほとんどのスタイルでこれを行います：

var obj = document.createElement('select');
obj.style.width= "100px";

名前にハイフンが含まれているスタイルの場合は、代わりに次のようにします。

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

— ダニエルXムーア
ソース

17

バニラJavaScriptを使用すると、これは実際には非常に簡単です。

menu.style.width = "100px";

— ジャスティン・ニースナー
ソース

14

すべての答えは、あなたが尋ねたことを正しく行う方法を教えてくれますが、JavaScriptを使用して要素にクラスを設定し、CSSを使用してスタイルを設定することをお勧めします。これにより、動作とスタイルを適切に分離できます。

サイトのスタイルを変更するデザイナーがいると想像してみてください。JavaScriptを使用しなくても、CSSだけで作業できるはずです。

プロトタイプでは、次のようにします。

$(newElement).addClassName('blah')

— ニック
ソース

1

私からの+1-すべてのCSSを個別に保つ方がはるかに簡単/クリーンです。

— Ian Oxley

1

参考のためにこれのjQueryバージョン...$(selector).addClass('blah')

— zgr024

8

2018年も同じことをしたい人のために

（CSSまたはJSを介して）CSSカスタムプロパティを要素に割り当て、それを変更できます。

CSSによる割り当て：

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

JSによる割り当て

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

JSを介してプロパティ値を取得する

ELEMENT.style.getPropertyValue('--element-width');

ここに役立つリンク：

— マッティア・アストリーノ
ソース

6

デバッグ時には、一連のcss属性を1行で追加できるようにします。

menu.style.cssText = 'width: 100px';

このスタイルに慣れると、次のように1行に一連のCSSを追加できます。

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

— 可愛らしい
ソース

5

グローバルプロパティを追加する場合は、以下を使用できます。

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

— ヘトデフ
ソース

3

<h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>

— モーシン・カーン
ソース

1

<body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>

— モーシン・カーン
ソース

1

ハイフンが含まれていない場合、これはほとんどのCSSプロパティで適切に機能します。

var element = document.createElement('select');
element.style.width = "100px";

以下のような彼らでハイフンを持つプロパティの場合max-width、あなたは変換する必要がありますsausage-caseしますcamelCase

var element = document.createElement('select');
element.style.maxWidth = "100px";

— ドート
ソース

0

以下のコードはスタイルシートを変更するのではなく、DOMを変更することを理解することが重要です。

document.getElementById("p2").style.color = "blue";

DOMはスタイルシート要素のプロパティの計算値を格納し、JavaScriptを使用して要素のスタイルを動的に変更すると、DOMが変更されます。コードの記述方法がダイナミクスに影響を与える可能性があるため、これは注意して理解することが重要です。要素自体に直接書き込まれていない値を取得しようとすると、次のようになります...

let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];

...コード例の「propertyValue」変数に格納される未定義の値を返します。CSSスタイルシート内に記述されたプロパティの取得と設定で作業していて、非常に一般的な状況であるこの状況で、style-property-values を取得および設定するSINGLE FUNCTIONが必要な場合は、次に、JQueryを使用する必要があります。

$(selector).css(property,value)

唯一の欠点は、JQueryを理解することですが、これは正直に言って、すべてのJavascript開発者がJQueryを学ぶべき非常に多くの正当な理由の1つです。純粋なJavaScriptのスタイルシートから計算されたCSSプロパティを取得したい場合は、使用する必要があります。

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

このメソッドの欠点は、getComputedValueメソッドが取得するだけで、設定されないことです。 Mozillaの計算値への取組みこのリンクは、私がここで扱ったことについてさらに深く掘り下げています。これが誰かに役立つことを願っています!!!

— Aft3rL1f3
ソース

最初のコードブロックにコンテンツがないと思いますか？

— zb226

1

そこで修正されました

— Aft3rL1f3