ハッキングが多すぎます。どうすればよいですか_html/css_WEB-ITnose

JavaScript で CSS スタイルを操作する場合、css2 の段階であれば、操作はそれほど難しいものではありません。ブラウザの互換性の問題はありますが、独自の関数をカプセル化することで、スタイルを設定するだけでなく、スタイルを取得することもできます。しかし、JavaScript が CSS3 に遭遇したらどうなるでしょうか?

CSS3 は現在さまざまなブラウザーに登場していますが、仕様セットとしてはまだ正式にリリースされていないことはわかっています。したがって、ブラウザごとに CSS3 属性のサポートが異なります。したがって、「CSS ハック」という用語が生まれます。すごいですね、なぜですか？なぜなら、css Hack を通じて CSS レベルでさまざまなブラウザと互換性を持たせることができ、それを実現するために JavaScript を借用する必要がないからです。ただし、5 つの主要なブラウザには独自の Hack ヘッダーがあります (Safari と chrome は webkit、IE は ms、Opera は o、Firefox は moz)。これにより、ある程度のコードの冗長性も生まれます。そして、js を介して css3 属性を制御すると、別の問題が発生します。

今回発生する問題は最終的にはコードの冗長性の問題です (4 つのメインストリーム カーネルにそれぞれスタイルを設定する必要があるため)。以下では関数を使用してこの問題を解決します。

 1 function setHack(ele,attr) { 2             //利用for-in循环遍历attr里面的属性 3             for (var i in attr){ 4                 var newi = i; 5                 //遍历是不是有- 6                 if(newi.indexOf("-")>0) { 7                     var num = newi.indexOf("-"); 8                     newi = newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase()); 9                 }10                 //常规的设置属性的方式11                 ele.style[newi] = attr[i];12                 newi = newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());13                 ele.style["webkit" + newi] = attr[i];14                 ele.style["moz" + newi] = attr[i];15                 ele.style["ms" + newi] = attr[i];16                 ele.style["o" + newi] = attr[i];17             }18         }

関数の説明: setHack 関数には 2 つのパラメーターがあります。ele は属性を設定する要素を表します。attr は、{"transform":" など、設定した属性と属性値を含む json 形式です。回転(20度)", "変換元":"120px 120px"}。コード中のif判定は主に属性の「-」を大文字の形式に変更することです。後者は主に Hack ヘッダーのコア部分の追加です。