JAvacript CSSスタイルを設定する新しい方法

JSで様々な効果を書く場合、最も多く使われるのは、オブジェクトのCSSスタイルを変えて自分の望む効果を達成することです.
背景の変更、フォントの色の変更、画像の切り替えなど、最も一般的なものです.これらは要素の背景やフォントの色を変えることにほかならない.
left、topなどのプロパティ.JS実行中に要素の様々な属性を動的に設定することで、きれいな効果が得られます.
最も一般的なのは、画像の切り替え、ドロップダウンメニュー、さまざまなフレンドリーなヒントボックスなどです.
通常CSSを設定する方法はオブジェクトを取得し、JSとCSSに対応する属性を変更することで変更目的を達成することです.
例えばJSのbackgroundColorはCSSのbackground-colorに対応し、アルパカ規則で書き換え、
各横棒の後ろの最初のアルファベットは大文字でなければなりませんが、いくつかの特殊なものがあります.みんなは自分で調べることができます.
Webページに次の要素がある場合:

に合格
var _wrp = document.getElementById( "wrapper");
この要素を取得するにはwrpの背景色、幅はそれぞれ黒、300画素に変更され、一般的には
次の2つのコードで直接設定されます.
(1)第一の方法
_wrp.style.backgroundColor = "#000";
_wrp.style.width = "300px";
これは私たちが最もよく使う方法で、みんなはもうよく知っています.
(2)第2の方法
ここ数日、連続した画像を再生して映画を見る効果を達成するための画像切り替えをノックして、進捗バーをプリロードするとき、
プログレスバースタイルを設定するときに、ユーザー自身にCSS文字列を入力させるので、フォーマットは正常です.
CSSは、転送後、それを1つの配列に分割し、「属性名'=>」の属性値に達する程度に、
例えば「width:300 px;background-color:#000」から
「width」=>「300 px」、「background-color」=>「000」}に分割
それから1つの循環を通じてその要素の様式を設定して、このように1つの問題に出会って、CSSの中の属性名はJSの中の属に変える必要があります
性名、これは面倒なことです.background-colorのような横棒だけなら、肝心なのはいくつかあります.
いくつかの特殊な、これはもっと面倒で、設定する前に大きな変換過程を作ることはできません.効率が低すぎます.
そしてふと思いましたwrp.styleが配列であれば、配列であれば直接通過します.wrp.style['属性名']に値を付けると、
ちょっとalertしましたwrp.style['width']は、前に設定した300 pxをサプライズでポップアップしました!!!
これでCSSを設定するのは簡単になりましたが、
ダイレクトパス
_wrp.style['width'] = '300px';
_wrp.style['background-color'] = '#000';
設定すればいいので、グーグルと火狐のテストで合格しました.
この方法には少なくとも2つの利点があります.
1.JSの対応する属性名を覚える必要はありません.特別なことは言うまでもありません.
2.配列があれば、中には「css属性名:属性値」が入っています.この場合、私たちは1つのサイクルで目的を達成することができ、効率的で便利です.
次のように使用します.

var _style_str = "width:300px;background-color:#000"; //CSS     ,      ，              
var style_arr =  _style_str.split( ";" ); //   ;     {"width:300px", "background-color:#000"} 
var _wrp = document.getElementById( "wrapper" ); //          

for( var i = 0; i < style_arr.length; i++ ){ 
    arr = style_arr[i].split(":"); //     
   _wrp.style[arr[0].trim()] = arr[1]; //   _wrp.style['width'] = "300px" 
}

 
このような要素のスタイルはよく設定されています!