jsCSS設定

王林オリジナル: 2023-05-29 14:15:09609ブラウズ

JavaScript と CSS は、インターネット開発の 2 つのコアテクノロジです。JavaScript は、Web ページにインタラクティブな効果とユーザーエクスペリエンスを動的に追加するために使用されるスクリプト言語です。CSS は、Web ページを美しくし、その表示効果を定義するために使用されるスタイル言語です。この記事では、最高の Web デザインとユーザーエクスペリエンスを実現するために JavaScript と CSS を設定する方法について説明します。

1. JavaScript の設定

1.1 JavaScript の導入

HTML ドキュメントに JavaScript を導入する場合、通常は 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用する必要があります。 93f0f5c25f18dab9d176bd4f6de5d30e タグに JavaScript を含める最良の方法は、async または defer オプションを使用することです。違いは、async オプションはダウンロード時にスクリプトが実行される (つまり、非同期実行) ことを示すのに対し、defer オプションはドキュメントがダウンロードされるまでスクリプトが実行されないことを示すことです。例:

<head>
  <script src="example.js" async></script>
  <script src="example.js" defer></script>
</head>

1.2 外部 JavaScript の使用

外部 JavaScript ファイルを使用する利点は、複数のドキュメント間でコードを再利用し、一貫性を確保できることです。外部 JavaScript ファイルを参照することにより、コードを HTML ドキュメントから分離し、HTML ドキュメントをより簡潔にすることができます。例:

<head>
  <script src="example.js"></script>
</head>

1.3 ページリダイレクト

JavaScript では、window オブジェクトの location 属性を使用して、ページを別のページにリダイレクトできます。メソッドは次のとおりです。

このコードは、ページを「https://www.example.com」にリダイレクトします。

1.4 イベントリスナーの追加

イベントリスナーは、イベントの発生時に特定の操作を実行するために使用されます。 JavaScript では、addEventListener() メソッドを使用してイベントリスナーを追加します。例:

window.location.href = "https://www.example.com";

このコードは、ユーザーがドキュメントをクリックしたときに関数を実行します。

1.5 DOM 要素の操作

DOM (Document Object Model) を使用して、HTML および XML ドキュメント内の要素を操作できます。 JavaScript では、DOM 要素は getElementById() メソッド、getElementsByClassName() メソッド、getElementsByTagName() メソッドなどを通じて取得できます。例:

document.addEventListener("click", function() {
  // 执行一些操作
});

このコードは、ID が「example」の DOM 要素の innerHTML 属性を「Hello, world!」に設定します。

1.6 配列への要素の追加

JavaScript では、push() メソッドを使用して要素を配列に追加できます。例:

document.getElementById("example").innerHTML = "Hello, world!";

このコードは、fruits という名前の配列の末尾に「Pear」を追加します。

2. CSS 設定

2.1 外部スタイルシート

外部スタイルシートを使用すると、複数のドキュメントで同じスタイルを共有できます。スタイルシートを別の CSS ファイルに配置し、HTML ドキュメント内でそのファイルを参照することで、HTML ドキュメントをよりわかりやすくすることができます。例:

var fruits = ["apple", "banana", "orange"];
fruits.push("pear");

このコードは、styles.css というファイルにスタイルシートを配置します。

2.2 内部スタイルシート

HTML ドキュメントの 93f0f5c25f18dab9d176bd4f6de5d30e タグに c9ccee2e6ea535a969eb3f532ad9fe89 タグを追加することで、HTML ドキュメントにスタイルシートを配置できます。例:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

このコードは、ドキュメントの背景色を黄色に設定します。

2.3 セレクター

セレクターは、スタイルを適用する要素を選択するために使用できます。 CSS では、スタイルの範囲を指定するためにセレクターが使用されます。 CSS には、クラスセレクター、ID セレクター、要素セレクター、属性セレクターなど、いくつかの異なるセレクタータイプがあります。例:

<head>
  <style>
    body {
      background-color: yellow;
    }
  </style>
</head>

このコードは、h1 要素のフォントサイズを 24 ピクセルに設定し、クラス名 .example の要素の背景色を青に、ID が example の要素の色を緑に設定します。例では、プロパティ値が true の要素の境界線は赤に設定されます。

2.4 レイアウトと配置

position 属性と top、bottom、left、right 属性を使用することで、CSS で要素をレイアウトし、配置することができます。例:

h1 {
  font-size: 24px;
}

.example {
  background-color: blue;
}

#example {
  color: green;
}

[example="true"] {
  border: 2px solid red;
}

このコードは、ID 例の要素をドキュメントの上から 100 ピクセル、左から 50 ピクセルに絶対配置します。

2.5 アニメーション効果

CSS のアニメーションプロパティを使用して、要素にアニメーション効果を作成できます。例:

#example {
  position: absolute;
  top: 100px;
  left: 50px;
}

このコードは、ID の例を持つ要素にアニメーション効果を適用し、その位置まで左に 100 ピクセル移動します。このアニメーション効果は example-animation という名前で、2 秒以内に無限回繰り返します。

結論

JavaScript と CSS は、最新のインターネットアプリケーションを作成するために必要な主要なテクノロジです。 JavaScript と CSS を正しく設定すると、ページの使いやすさとユーザーエクスペリエンスが大幅に向上します。この記事では、最適な Web デザインとユーザーエクスペリエンスを実現するために JavaScript と CSS を設定する方法について説明しました。

以上がjsCSS設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html xml JS 对象事件 dom 异步 location innerHTML 选择器样式表 position animation https

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：IE11 javascript2.0が無効です次の記事：IE11 javascript2.0が無効です

続きを見る