JavaScriptのローカル変更とCSSスタイルのグローバル変更例を詳しく解説-jsチュートリアル-php.cn

JavaScriptのローカル変更とCSSスタイルのグローバル変更例を詳しく解説

伊谢尔伦

リリース： 2017-07-21 14:59:34

オリジナル

2126 人が閲覧しました

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

ログイン後にコピー

2 番目に、スタイルをグローバルに変更します
通常は。 , 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つあります。
最初の 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 サイトの他の関連記事を参照してください。