ホームページ > 記事 > ウェブフロントエンド > CSSローカルおよびグローバルスタイルコードのJavaScript変更の詳細な説明
CSSローカルおよびグローバルスタイルコードのJavaScript変更の詳細な説明
- 伊谢尔伦オリジナル
- 2017-07-19 16:32:582574ブラウズ
CSS スタイルの変更は、場合によっては動的に変更することができます。
スタイルを部分的に変更する方法を紹介します。 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″などの特定のスタイルを忘れずに書き留めてください。次に、スタイルをグローバルに変更します通常は、外部リンク スタイルの 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つあります。
最初の方法: 外部スタイル シート ファイルへのリンク (スタイル シートへのリンク)
最初に外部スタイル シート ファイル (.css) を作成してから、HTML リンク オブジェクトを使用できます。例は次のとおりです。
<head> <title>文档标题</title> <link rel=stylesheet href="http://demo.css" type="text/css"> </link></head>
XML では、次の例に示すように宣言領域に追加する必要があります。
< ? xml-stylesheet type="text/css" href="http://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 番目のタイプ: インライン定義 (インライン スタイル)
インライン定義では、オブジェクトのマーク内でオブジェクトのスタイル属性を使用して、それに適用されるスタイル シート属性を定義します。例は次のとおりです。
以上がCSSローカルおよびグローバルスタイルコードのJavaScript変更の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。