ホームページ > 記事 > ウェブフロントエンド > スタイルオブジェクトのcssTextメソッドを使用する方法にはどのようなものがありますか?
今回はstyleオブジェクトのcssTextメソッドの使い方と、styleオブジェクトのcssTextメソッドを使用する際の注意点を紹介します。実際の事例を見てみましょう。
cssText の本質とは何ですか?
cssTextの本質はHTML要素のstyle属性値を設定することです。
cssTextの使い方?
domElement.style.cssText = "color:red; font-size:13px;";
cssTextの戻り値は何ですか?
一部のブラウザ (Chrome など) では、割り当てた値がすべて返されます。 IE では、出力をフォーマットし、属性を大文字にし、最後のセミコロンを削除します。例:
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";2 alert(document.getElementById("d1").style.cssText);IE の値は: FONT-SIZE: 13px です。 ; COLOR : red cssText を使用する利点 通常、要素オブジェクトのスタイルを設定するために js を使用するときは、次の形式を使用します:
var element= document.getElementById(“id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”;より多くのスタイルがある場合、多くのコードが存在します。 JS を介してオブジェクトのスタイルを上書きするのが一般的です。元のスタイルを破壊して再構築するプロセスにより、ブラウザのオーバーヘッドが増加します。 js には cssText メソッドがあります:
domElement.style.cssText=”样式”; domElement.style.cssText=”width:20px;height:20px;border:solid 1px red;”;これにより、ページのリフローを回避し、ページのパフォーマンスを向上させることができます。 しかし問題があり、例えば元のスタイルに「display:none;」があった場合、上記のJSを実行すると表示が削除されてしまいます。
この問題を解決するには、cssText の蓄積メソッドを使用できます:
domElement.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’さらに、その前に div {
text-decoration:underline } というスタイルシートファイルがある場合、これは上書きされますか? ?そうしません!これは、HTML 要素の style 属性に直接作用しないためです。
具体的なケース分析:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>控制div属性</title> <style> #outer{width:500px;margin:0 auto;padding:0;text-align:center;} #div1{width:100px;height:100px;background:black;margin:10px auto;display:block;} </style> <script> var changeStyle = function (elem, attr, value) { elem.style[attr] = value }; window.onload = function () { var oBtn = document.getElementsByTagName("input"); var oDiv = document.getElementById("div1"); var oAtt = ["width","height","background","display","display"]; var oVal = ["200px","200px","red","none","block"]; for (var i = 0; i < oBtn.length; i++) { oBtn[i].index = i; oBtn[i].onclick = function () { this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); changeStyle(oDiv, oAtt[this.index], oVal[this.index]) } } }; </script> </head> <body> <div id="outer"> <input type="button" value="变宽" /> <input type="button" value="变高" /> <input type="button" value="变色" /> <input type="button" value="隐藏" /> <input type="button" value="重置" /> <div id="div1"></div> </div> </body> </html>これらのケースを読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 関連書籍:
iframeの子ページでのページポップアップレイヤー効果をブロックする親ページの操作方法
以上がスタイルオブジェクトのcssTextメソッドを使用する方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。