ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript コントロール Web ページ - CSS および DOM_javascript スキル
JavaScript コントロール Web ページ - CSS および DOM_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:08:231355ブラウズ
推奨読書: JavaScript コントロール Web ページ - DOM
DOM は、World Wide Web 標準に準拠した HTML 操作メソッドであり、innerHTML 機能よりも多くの操作機能を実現できます。
HTML コードと CSS コードは次のとおりです
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span.class1{
background-color:#DDDDDD;
}
span.class2{
background-color:#221717;
}
</style>
</head>
<body>
<span id="span1" class="class1">
Start Game
</span>
<span id="span2" class="class2">
Start Game
</span>
</body>
</html>
className ノード属性は、ノードのスタイル クラス全体を変更することで劇的なスタイルの変更を実現します
DOM は、ノード属性の className 属性を通じて要素スタイル クラスへのアクセスを提供します
alert(document.getElementById(“span1”).className);
CSS スタイル クラスの名前を変更して、要素の外観の変換を完了します
document.getElementById(“span1”).className=”class2”;//将span1的样式换成span2的样式
同様に、onmouseover() および onmouseout() イベントを使用して要素のスタイルを制御することもできます
<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">
この効果は一般的に CSS を使用して制御されますが、ここではこれらのツールの適用のみに焦点を当てており、類似点に従うだけで済みます
CSS スタイルのクラスは Javascript クラスとは全く関係がありません。それらは完全に異なるものです
ノードの単一のスタイル属性にアクセスすることにより、スタイル ノード属性は少量のスタイル変更を実現します
ノードの Style 属性は、単一のスタイル属性へのアクセスを提供します
<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'" style=" visibility:hidden">
style="visibility:hidden" は要素が非表示であることを示します
Web ページ要素は、要素オブジェクトの表示スタイル機能を使用して動的に表示または非表示にすることができます (display:none/display:block でも要素を非表示および表示できます)
DOM はテキスト段落を含む任意の HTML 要素を自由に作成できます
document.createElement() は HTML タグの作成に使用され、パラメータはタグ名
document.createElement("p") は p タグを作成します
もう 1 つ: document.createTextNode() はテキスト段落の作成に使用され、パラメータはテキストの内容です
var pElem=document.createElement(“p”);//P タグを作成します
pElem.appendChild(document.createTextNode("Hello WeAreZero!"));//サブ要素テキストを P タグに追加します
document.getElementById("span1").appendChild(pElem);//P タグとそのサブ要素を span1 タグに追加します
付録:
ドキュメント オブジェクトの createElement() メソッドを使用すると、任意の HTML 要素を作成できます
要素にテキスト コンテンツを追加する必要がある場合は、テキスト コンテンツのサブ要素を作成し、それを要素に追加する必要があります
DOM ツリー内のノードを慎重に追加および削除することで、Web ページを自由に逆アセンブルおよび再編成できます
これは、Web ページを制御するための JavaScript の紹介です。CSS と DOM が皆さんのお役に立てば幸いです。