ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、JavaScript: Style_html/css_WEB-ITnose を克服するための JavaScript の 5 つの武器
HTML、CSS、JavaScript: Style_html/css_WEB-ITnose を克服するための JavaScript の 5 つの武器
- WBOYオリジナル
- 2016-06-24 11:15:261343ブラウズ
HTML の世界では、要素に関して主に注目すべきはその気質ではなく、そのスタイルです。スタイルはその外観を決定するためです。よく言われるように、JavaScript と Style、これを手に入れた者が世界を勝ち取ります。ただし、Style が JavaScript を変更することはできませんが、JavaScript は Style を征服することができます。 JavaScript には 5 つの武器があるため、遠くから眺めたり、遊んだりと、やりたいことをすべて行うことができます。
最初の武器は className です。JavaScript では、要素の className を取得することは、この要素の class 属性の値を取得することを意味します。コードを表示:
<div id="box" class="one two"/><script> var box = document.getElementById("box") alert(box.className) box.className += ' three'</script> 上記のコードは、box クラスを取得し、それに 3 を追加します。クラスを削除する場合は、文字列操作によってクラスを削除し、className を再割り当てします。
2 番目の武器はスタイルです。正確に言うと、これを使用してほぼすべてのスタイルを変更できます。たとえば、box.style.width='100px' を実行すると、ボックスに style="width:100px" を追加するのと同じになります。
background-color、marigin-top など、複数の単語で構成されるスタイル値の場合は、水平線を削除し、単語の最初の文字を大文字にします。はい、backgroundColor や mariginTop などに変更します。 -moz-border-radius と同様に、- を削除し、その後の文字を大文字に変更すると、MozBorderRadius に変更されます。
CSS では style 属性が優先されるため、style を使用して CSS で設定されたスタイルをオーバーライドすることも、空の文字列に設定して復元することもできます:
var box = document.getElementById("box")box.style.width='100px'box.style.width='' 上記のコードは最終的にボックスの幅を維持します変更なし。
3 番目の武器は cssText ですが、実際にはこれもスタイルの属性です。しかし、それは非常に強力であるため、私たちはそのステータスを特別に高めました。 style.cssText を使用して、完全なスタイル コンテンツを取得および設定します。
<div>Button</div><script> var div = document.body.children[0] div.style.cssText='color: red !important; \ background-color: yellow; \ width: 100px; \ text-align: center; \ blabla: 5; \ ' alert(div.style.cssText)</script>
ブラウザは cssText を解析し、解析結果を要素に適用します。上記のコードでは、blabla を知らない場合は直接無視され、エラーは報告されないため、タイプミスに注意してください。
そして、! important を追加したい場合は、cssText のみを使用できます。
次に登場するのは、まさに重量級の武器が 2 つ、つまり 1 つと 10 分の 1 の武器です。 1 つは標準の getComputedStyle で、もう 1 つはその亜種の 10 分の 1 であり、ナルシストな M$IE が自分のために特別に作成した currentStyle です (ああ、その市場シェアはわずか 10 分の 1 だそうです)。
実際のページでは、要素の style 属性にスタイルが設定されているのはほとんど見られないため、style を使用して要素の Style を読み取ることはほとんど不可能です。たとえば、次の例では、
<style> body { margin: 10px }</style><body> <script> alert(document.body.style.marginTop) </script> </body> 値を取得できません。
このニーズは window.getComputedStyle によってのみ解決できます。このメソッドは DOM レベル 2 の標準メソッドであり、すべてのブラウザー (IE
したがって、上記の例の marginTop と、ブラウザが要素にスタイルとスタイル シートを適用した後のすべての Style を取得するには、次のように行うことができます:
<style> body { margin: 10px }</style><body> <script> var computedStyle = getComputedStyle(document.body, null) alert(computedStyle.marginTop) </script></body> IE 9 より前のブラウザの場合は、 currentStyle を使用する必要があります。読む。または次のようにします:
<style> body { margin: 10% }</style><body><script> if (window.getComputedStyle) { var computedStyle = getComputedStyle(document.body, null) } else { computedStyle = document.body.currentStyle } alert(computedStyle.marginTop) </script></body> さて、上記は JavaScript がスタイルを征服するための 5 つの武器です。しかし、私が使用しているのは最初の 4 つの武器だけです。ユーザーはまだ IE 9 ブラウザーを使用しているため、彼らにサービスを提供するのは本当に無力だと感じています。
ステートメント: この記事は、(盗用された) スタイルとクラス、getComputedStyle について言及しています