web-dev-qa-db-ja.com

スタイル文字列全体をjavascriptの要素に設定する(個々のスタイルパラメータではない)

Javascriptを介して任意のスタイルをスパンに設定する必要があります。

私は次のようなことができることを知っています:span.style.height="250px";ただし、テンプレートからランダムなフルスタイル定義を挿入できる必要があります

例えば

float:left; 
text-decoration:underline; 
cursor:pointer; 
color:blue;

Javascriptでそれを行う方法はありますか?何かのようなもの:

element.style="all style definition here";

24
Nir

.style.cssTextプロパティはどうですか? これがMicrosoftの説明です。

次のように、適用したいスタイルをスローします。

document.getElementById('myEl').style.cssText = 'float:left;margin-top:75px;';

ブラウザのサポートに関しては、IE独自のものでしたが、十分にサポートされていると思います(少なくとも、IE、FF3、およびSafari 3.2 WINで動作します)。

46
ajm

軽量にしたい場合は、次のような関数を作成します。

function setStyles(element, styles)
{
    for(var s in styles) {
        element.style[s] = styles[s];
    }
}

次に、スタイルをオブジェクトリテラルとして渡します。

setStyles(element, {float: "left",
                    textDecoration: "underline",
                    cursor: "pointer",
                    color: "blue"});

関数はJavaScriptを介して要素のstyleオブジェクトにアクセスすることでスタイルを変更するだけなので、渡されるスタイル参照はJavaScriptの観点から命名に従う必要があることに注意してください。

文字列からスタイル入力を取得する必要がある場合は、それを非常に簡単に解析してオブジェクトリテラルを作成できます。

8
Alex Rozanski

element.setAttribute('style', '...');がありますが、IEでは失敗します。

解決策 がありますが、私は試していません。

2
drdaeman