Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Это первая секция из второй части CSS tutorial`а. Вторая часть содержит несколько примеров которые покажут возможности использования CSS с другими web технологиями и технологиями Mozilla .
Каждая страница во второй части проиллюстрирует как CSS связан с несколькими другими технологиями. Эти страницы не спроектированы для того чтобы обучить вас другим технологиям. Перейдите к другим руководствам , чтобы познакомится с ними детально.
Эти страницы предназначены чтобы проиллюстрировать возможности использования CSS. Чтобы понять вам понадобятся некоторые знания CSS , но вам не обязательно знать другие языки чтобы понять о чем идёт речь .
Previous section (of Part I): Media
Next section: SVG
Information: JavaScript
JavaScript это программный язык. JavaScript в основном предназначен для анимации на веб сайтах и в приложениях.
JavaScript can interact with stylesheets, allowing you to write programs that change a document's style dynamically.
There are three ways to do this:
- By working with the document's list of stylesheets—for example: adding, removing or modifying a stylesheet.
- By working with the rules in a stylesheet—for example: adding, removing or modifying a rule.
- By working with an individual element in the DOM—modifying its style independently of the document's stylesheets
| For more information about JavaScript, see the JavaScript page in this wiki. |
Action: A JavaScript demonstration
Make a new HTML document, doc5.html. Copy and paste the content from here, making sure that you scroll to get all of it:
<!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>Click Me</button> </body> </html>
Make a new CSS file, style5.css. Copy and paste the content from here:
#square {
width: 120px;
height: 120px;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
Make a new text file, script5.js. Copy and paste the content from here:
// JavaScript demonstration
var changeBg = function (event) {
console.log("method called");
var me = event.target
, square = document.getElementById("square");
square.style.backgroundColor = "#ffaa44";
me.setAttribute("disabled", "disabled");
setTimeout(function () { clearDemo(me) }, 2000);
}
function clearDemo(button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}
var button = document.querySelector("button");
button.addEventListener("click", changeBg);
console.log(button);
Open the document in your browser and press the button or see a working sample below.
- The HTML document links the stylesheet as usual, and it also links the script.
- The script works with individual elements in the DOM. It modifies the square's style directly. It modifies the button's style indirectly by changing an attribute.
- In JavaScript,
document.getElementById("square")is similar in function to to the CSS selector#square. - In JavaScript,
backgroundColorcorresponds to the CSS propertybackground-color. JavaScript does not allow hyphens in names, so "camelCase" is used instead. - Your browser has a built-in CSS rule for
button[disabled="true"]that changes the button's appearance when it is disabled.
| Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards. |
See a solution to this challenge.
What next?
If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.
In this demonstration, the HTML document links the script even though only the button element uses the script. Mozilla extends CSS so that it can link JavaScript code (and also content and other stylesheets) to selected elements. The next page demonstrates this: XBL bindings