2009-06-11 9 views
20

javascriptでスパンに任意のスタイルを設定する必要があります。javascript(個別のスタイルパラメータではない)から要素全体にスタイル文字列を設定する

私は次のようなことができることを知っています:span.style.height = "250px"; は、しかし、私はテンプレート例えば

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

JavaScriptでそれを行うための方法はありますからランダム完全なスタイル定義を挿入できるようにする必要がありますか? element.style = "ここに全てのスタイル定義"のようなもの; ?

+0

コメント - 独立したコードでなければなりません。 jQueryやその他のライブラリはありません... – Nir

+0

jQueryの動作を把握することは可能でしょうか?それは完全にjs自体で書かれているので、そこにいなければなりません。 – Martijn

答えて

36

.style.cssTextプロパティについてはどうですか? Here's Microsoft's explanation.

投げ、それあなたがそうのように適用したいスタイル:ブラウザのサポートについては

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

、それはIE独自のだったが、私はFF3、IEの中に作品(それは、よくサポートさだと信じて、 Safari 3.2 WIN以上)。

+2

'cssText'は文字列であり、関数ではないので、' document.getElementById( 'myEl')。style.cssText = 'float:left; margin-top:75px;'; 'にする必要があります。 – panzi

+0

良いキャッチ。これは、過去3年間の文字列だったはずです! :-) – ajm

+1

FYI:[.cssText']の[Quirksmode情報](http://www.quirksmode.org/dom/w3c_css.html#t30) – Campbeln

2

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

a solutionがありますが、試していません。

8

あなたはそれが軽量になりたい場合は、のような関数を作成:スタイルの参照が渡されたことを

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

注:あなたがオブジェクトリテラルとしてのスタイルを渡すその後

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

関数はJavaScriptを介して要素のstyleオブジェクトにアクセスするだけでスタイルを変更するため、JavaScriptの観点から名前を付ける必要があります。

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

関連する問題