CSSローカルおよびグローバルスタイルコードのJavaScript変更の詳細な説明-jsチュートリアル-php.cn

CSSローカルおよびグローバルスタイルコードのJavaScript変更の詳細な説明

伊谢尔伦

リリース： 2017-07-19 16:32:58

オリジナル

2523 人が閲覧しました

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(&#39;obj&#39;).style.backgroundColor=”#003366″

ログイン後にコピー

などの特定のスタイルを忘れずに書き留めてください。次に、スタイルをグローバルに変更します

通常は、外部リンクスタイルの href を変更できます。この値により、Web ページスタイルのリアルタイムの切り替え、つまり「テンプレートスタイルの変更」が可能になります。このとき、まず変更する対象に

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />

ログイン後にコピー

のようなIDを与える必要があります。呼び出しは

<span on click="javascript:document.getElementById(&#39;css&#39;).href = &#39;ie.css&#39;">点我改变样式</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 サイトの他の関連記事を参照してください。