ppk が JavaScript スタイル属性_JavaScript スキルについて語る

実際、7 つのサンプル スクリプトはすべて、何らかの形式の CSS 変更を使用しています。たとえば、「Form Validation」はエラーが発生したフォームフィールドのスタイルを変更し、「XMLHTTP Speed Tester」はアニメーションを使用して（実際には短期間に複数回スタイルを変更します）速度データにユーザーの注意を引きます。 (そして、正直に言うと、これはちょっと派手な効果です)。ドロップダウン メニューでは、スタイルを変更することでメニュー項目の表示と非表示を切り替えます。これらの変更はすべて同じ目的を持っています。つまり、これらの要素にユーザーの注意を引くことです。

JavaScript には、次の 4 つの方法で CSS を変更できます。

l 要素の style 属性を変更します (element.style.margin='10%');

l要素のクラスまたは ID (element.className='error') を変更すると、ブラウザーは新しいクラスまたは ID に定義されたスタイルを自動的に適用します。

l は新しい CSS 命令をドキュメントに書き込みます (document.write() '');

l ページ全体のスタイル シートを変更します。

ほとんどの CSS 変更スクリプトは、スタイル属性を変更するか、ドキュメントのクラスまたは ID を変更する方法を使用します。 .write メソッドは、ページのアクセシビリティを向上させる特定の状況にのみ適しています。これは、すべてのブラウザーがこれをサポートしているわけではなく、通常は
とにかく、サンプル スクリプトでは 4 つのメソッドをすべて使用しています。この章では、これらの各メソッドとその適用箇所について説明します。

CSS を変更する元の最もよく知られた方法は次のとおりです。すべての HTML 要素が所有する style 属性を介してインライン スタイルにアクセスするには、要素の CSS プロパティのマージンを設定する場合、style オブジェクトに対応するものが含まれます。 CSS プロパティの色を設定したい場合は、element.style.color JavaScript プロパティを使用します。

Inline Styles

覚えておいてください: HTML 要素の style 属性により、インライン スタイルにアクセスできます。

CSS の理論を見てみましょう。CSS には、要素のスタイル シートを定義する 4 つの方法があります。つまり、CSS を HTML タグの style 属性に直接記述することができます。 🎜>
さらに、使用する方法に関係なく、スタイル シートを埋め込んだり、リンクしたり、インポートしたりすることができます。インライン スタイルは、他の形式のスタイルよりも明示的であるため、インライン スタイルは、埋め込まれた、リンクされた、またはインポートされたスタイル シートをオーバーライドできます。ページのスタイルシートで定義されているスタイル。style 属性はこれらのインライン スタイルにアクセスできるため、

ただし、スタイルを取得しようとすると問題が発生する可能性があります。 >

テキスト

p#test {

マージン: 10%;

}

alert(document.getElementById) ('test').style.margin);

テスト段落にはインライン スタイルが含まれていません。マージン: 10% は埋め込まれた (またはリンクされた、またはインポートされた) スタイル シートで定義されています。 style 属性から読み取ることはできません。ポップアップ警告ボックスは空で表示されます。

次の例では、マージンがインライン スタイルとして定義されているため、ポップアップ アラート ボックスに返される結果「10%」が表示されます:


Text


alert(document.getElementById('test').style.margin);

したがって、style 属性はスタイルの設定には最適ですが、スタイルの取得にはあまり役立ちません。ページに埋め込まれている、リンクされている、または導入されているスタイル シートからスタイルを取得する方法については後で説明します。

ダッシュ

font-size など、多くの CSS プロパティ名にはダッシュが含まれています。ただし、JavaScript ではダッシュはマイナスを表すため、プロパティ名には使用できません。これにより、エラーが発生します:

element.style.font-size = '120%';

これは、ブラウザーに element.style.font ) 変数サイズを減算するよう要求しています。 ? = '120%' の場合、それは何を意味しますか?代わりに、ブラウザーはキャメルケースのプロパティ名を期待します:

element.style.fontSize = '120%';

一般的なルールは、CSS プロパティ名のダッシュとその後の文字からすべての要素を削除することです。ダッシュが大文字になります。このようにして、margin-left は marginLeft になり、text-decoration は textDecoration になり、border-left -style は borderLeftStyle になります。

単位

JavaScript の多くの数値には、CSS で宣言する場合と同様に単位が必要です。 fontSize=120 とはどういう意味ですか? 120 ピクセル、120 ポイント、それとも 120%?ブラウザはこれを認識しないため、何も行いません。意図を明確にするためには単位が必須です。

setWidth() 関数を例に挙げます。これは、「XMLHTTP Speedometer」のアニメーション効果を実装するコア プログラムの 1 つです。

[XMLHTTP Speedometer、行 70-73]

function setWidth(width) {

if (width
document.getElementById('meter').style.width = width 'px' ;

}

この関数は値を引き継ぎ、メーターの幅をこの新しい値に変更します。安全性チェックを行って値が 0 より大きいことを確認した後、要素の style.width をこの新しい幅の値に設定します。最後に「px」を追加すると、ブラウザが値の解釈方法を認識できず、何も実行しない可能性があるためです。

'px' を忘れないでください

幅または高さの後に 'px' 単位を追加するのを忘れるのは、CSS 変更でよくあるエラーです。

CSS quirks モードでは、ブラウザーは古いルールに従って単位のない値をピクセル値として扱うため、「px」を追加する必要はありません。これ自体は問題ではありませんが、多くの Web 開発者は幅や高さの値を変更した後、単位を追加するのを忘れる癖がついているため、CSS 厳密モードで作業するときに問題が発生します。

スタイルの取得

警告: 次のコンテンツにはブラウザーの互換性の問題があります。

これまで見てきたように、style 属性は、ページに埋め込まれ、リンクされ、またはインポートされたスタイル シートに設定されているスタイルを読み取ることができません。ただし、Web 開発者はこれらのスタイルを読み取る必要がある場合があるため、Microsoft と W3C の両方が非インライン スタイルにアクセスする方法を提供しています。 Microsoft のソリューションは Explorer でのみ機能しますが、W3C 標準は Mozilla と Opera で機能します。

Microsoft の解決策は currentStyle プロパティです。これは次の 2 つの点を除いて style プロパティとまったく同じように機能します。

l インライン スタイルだけでなくすべてのスタイルにアクセスできるため、スタイルを報告します。実際には要素に適用されます。

l これは読み取り専用であり、それを介してスタイルを設定することはできません。

例:

var x = document.getElementById('test');

alert(x.currentStyle.color);ダイアログがポップアップ表示されます。ボックスには、要素が定義されている場所に関係なく、要素の現在の色スタイルが表示されます。

W3C の解決策は window.getComputedStyle() メソッドで、これは類似していますがより複雑な構文で機能します。

var x = document.getElementById('test');

alert(window.getComputedStyle(x,null).color);

getComputedStyle() は、元のスタイルが 50em または 11% である可能性がありますが、常にピクセル値を返します。

以前と同様、非互換性が発生した場合、すべてのブラウザーを満たすためにいくつかのコード ブランチが必要になります。

function getRealStyle(id,styleName) {

var element = document.getElementById (id);

var realStyle = null;

if (element.currentStyle)

realStyle = element.currentStyle[styleName]; (window.getComputedStyle)

realStyle = window.getComputedStyle(element,null)[styleName];

return realStyle;

を使用できます。この関数は次のようになります:

var textDecStyle = getRealStyle('test','textDecoration');

getComputedStyle() は常にピクセル値を返し、currentStyle で最初に定義された単位を保持することを覚えてください。 CSS。

略語スタイル

警告 次のコンテンツにはブラウザの互換性の問題があります。

style 属性を通じてインライン スタイルを取得する場合でも、今説明した関数を通じて他のスタイルを取得する場合でも、省略されたスタイルを読み取ろうとすると問題が発生します。

この境界線の定義を見てください


テキスト


これはインライン スタイルであるため、次のコード行が機能することが期待されます。

alert(document.getElementById('test').style.border); > 残念ながらそれはできません。ポップアップ ダイアログ ボックスに表示される正確な値は、ブラウザーによって異なります。

l Explorer 6 では #cc0000 1px ソリッドが表示されます。

l Mozilla 1.7.12 は 1px ソリッド rgb(204,0,0) を提供します。

l Opera 9 では 1px ソリッド #cc0000 が与えられます。

l Safari 1.3 では境界値が提供されません。

問題は、border が速記宣言であることです。これには、上下左右の境界線の幅、スタイル、色など、12 個以上のスタイルが暗黙的に含まれています。同様に、フォント宣言は、font-size、font-family、font-weight、および line-height の短縮形であるため、同様の問題が発生します。

rgb()

Mozilla で使用される特別な色の構文 rgb(204,0,0) に注意してください。これは、従来の #cc0000 に代わる有効な代替手段です。 CSS と JavaScript の間で任意の構文を選択できます。

ブラウザはこれらの省略された宣言をどのように処理しますか?上記の例は直接的すぎるように思えますが、直感的には、ブラウザーが 1 ピクセルのソリッド #cc0000 を返し、それがインライン スタイルで定義されている内容と一致していると予想されるはずです。残念ながら、短縮プロパティはそれよりも複雑です。

次の状況を考えてみましょう:

p {

border: 1px Solid

}


Test

alert(document.getElementById('test').style.borderRightColor);

border-right- はインライン スタイルの色に含まれていませんが、すべてのブラウザで正しい色が報告されます。代わりに border-color を宣言します。どうやらブラウザは、境界線全体の色が設定されたときに右側の境界線の色が設定されたと認識しているようですが、これも論理的です。

ご覧のとおり、ブラウザはこれらの例外に対するルールを作成する必要があり、若干異なる方法で短縮宣言を処理することを選択しています。省略された属性を処理するための明確な仕様がない場合、どのブラウザが正しいか間違っているかを判断するのは困難です。