JavaScript コントロール Web ページ - CSS および DOM_javascript スキル-jsチュートリアル-php.cn

JavaScript コントロール Web ページ - CSS および DOM_javascript スキル

WBOY

リリース： 2016-05-16 15:08:23

オリジナル

1331 人が閲覧しました

推奨読書: 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 が皆さんのお役に立てば幸いです。