--- title: JavaScript and CSS slug: Web/Guide/CSS/Getting_started/JavaScript tags: - CSS - 'CSS:Getting_Started' translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---

これは CSS チュートリアル第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。

第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。

代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。

前の章（第 1 部）: メディア
次の章: SVG

JavaScriptについて

JavaScript はプログラミング言語 です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。

JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。

3 つの方法があります:

文書内のスタイルシートの一覧を扱う方法—例: スタイルシートの追加、削除、編集
スタイルシート内のルールを扱う方法—例: ルールの追加、削除、編集
DOM 内の個々の要素を扱う方法—文書のスタイルシートと関係なしに、スタイルシートを編集します

さらに詳しく
JavaScript, についてのさらに詳しい情報は、この wiki の JavaScript のページをご覧ください。

実習: JavaScript の実演

新規 HTML 文書 doc5.html を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:

<!DOCTYPE html>
<html>

<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
<script type="text/javascript" src="script5.js"></script>
</head>

<body>
<h1>JavaScript sample</h1>

<div id="square"></div>

<button type="button" onclick="doDemo(this);">Click Me</button>

</body>
</html>

新規 CSS ファイル style5.css を作り、次の内容をコピー＆ペーストしてください:

/*** JavaScript demonstration ***/
#square {
  width: 20em;
  height: 20em;
  border: 2px inset gray;
  margin-bottom: 1em;
}

button {
  padding: .5em 2em;
}

新規テキストファイル script5.js を作り、以下の内容をコピー＆ペーストしてください:

// JavaScript demonstration
function doDemo (button) {
  var square = document.getElementById("square");
  square.style.backgroundColor = "#fa4";
  button.setAttribute("disabled", "true");
  setTimeout(clearDemo, 2000, button);
}

function clearDemo (button) {
  var square = document.getElementById("square");
  square.style.backgroundColor = "transparent";
  button.removeAttribute("disabled");
}

ブラウザで HTML 文書を開いて、ボタンを押してください。

この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:

JavaScript sample

この実演についての重要な補足:

HTML 文書からは、いつものようにスタイルシートがリンクされ、スクリプトもリンクされています
スクリプトは DOM の個々の要素を扱います。正方形のスタイルを直接編集しています。ボタンのスタイルは属性を変更することで、間接的に編集しています。
JavaScript では、document.getElementById("square") は CSS セレクタ #square と、機能的に同義です。
JavaScript では、backgroundColor は CSSのプロパティ background-color に相当します。JavaScriptでは名前にハイフンを含めることができないので、"キャメルケース" が代わりに使われます。
ブラウザ内蔵の CSS ルールには
button{{mediawiki.external('disabled=\"true\"')}} に対するものがあり、ボタンが使用不可にされるとボタンの外見を変更します。

チャレンジ
スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。

チャレンジの解答を見る。

さて次は？

このページにわかりづらいところやご意見があれば Discussion ページに参加してください。

この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: XBL bindings