ホームページ > 記事 > ウェブフロントエンド > JavaScriptのローカル変更とCSSスタイルのグローバル変更例を詳しく解説
JavaScriptのローカル変更とCSSスタイルのグローバル変更例を詳しく解説
- 伊谢尔伦オリジナル
- 2017-07-21 14:59:342111ブラウズ
1. スタイルの部分変更
は、直接スタイルの変更、classNameの変更、cssTextの変更の3種類に分けられます。注意する必要があるのは次のとおりです:
大文字の使用に注意してください:
JavaScript は大文字の使用に非常に敏感です。ClassName は「N」を「n」として書くことはできません。また、cssText は「T」を「t」として書くことはできません。そうしないと、効果が得られません。 。
メソッドの呼び出し:
classNameを変更する場合は、事前にスタイルシートでクラスを宣言しますが、呼び出し時にスタイルに従わないでください。 document.getElementById('obj').style.className=”…” のように書くのは間違いです。 document.getElementById('obj').className="..." のようにのみ記述できます。
cssText を変更します
ただし、cssText を使用する場合は、スタイルを追加する必要があります。 正しい記述方法は、 document.getElementById( 'obj').style.cssText =”…”
直接スタイルの変更について話す必要はありません。
document.getElementById('obj').style.backgroundColor=”#003366″
2 番目に、スタイルをグローバルに変更します
通常は。 , href の値により外部リンクのスタイルを変更できます。これにより、Web ページのスタイルのリアルタイム切り替え、つまり「テンプレート スタイルの変更」が実現されます。このとき、まず変更が必要なターゲットに
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
などの ID を与える必要があります。呼び出し方は
<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>
のように非常に簡単です。初心者にとっては、方法がわからないことがよくあります。 JavaScript で CSS 固有のスタイルを記述しますが、異なるブラウザーで必要になる場合もあります。これも同じではありません。たとえば、Float は IE では styleFloat、FIREFOX では cssFloat と記述されますが、これには全員の蓄積が必要です。 Google で「ccvita javascript」を検索すると、疑問が解決するかもしれません。
基礎知識
Webページでスタイルシートを呼び出す方法は通常3つあります。
最初の 1: 外部スタイル シート ファイルへのリンク (スタイル シートへのリンク)
最初に外部スタイル シート ファイル (.css) を作成してから、HTML リンク オブジェクトを使用できます。例は次のとおりです。
<head> <title>文档标题</title> <link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css"> </link></head>
XML では、次の例に示すように宣言領域に追加する必要があります:
< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
2 番目: 内部スタイル ブロック オブジェクトを定義します (スタイル ブロックの埋め込み)
追加できますHTML 内でドキュメントとタグの間にブロック オブジェクトを挿入します。定義方法については、スタイルシートの構文を参照してください。例は次のとおりです。
<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
</body></html>ここでスタイル オブジェクトの type 属性を「text/css」に設定すると、このタイプをサポートしていないブラウザはスタイル シートを無視できることに注意してください。
3 番目のタイプ: インライン定義 (インライン スタイル)
インライン定義では、オブジェクトのマークアップ内のオブジェクトの style 属性を使用して、それに適用されるスタイル シート属性を定義します。例は次のとおりです。
以上がJavaScriptのローカル変更とCSSスタイルのグローバル変更例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。