--- title: JavaScript i CSS slug: Web/Guide/CSS/Inici_en_CSS/JavaScript tags: - CSS - 'CSS:Getting_Started' - Example - Guide - Intermediate - NeedsUpdate - Web translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents ---

Aquesta és la primera secció de la Part II del tutorial CSS. La Part II conté alguns exemples que mostren l'abast de CSS utilitzat amb altres tecnologies web i Mozilla.

Cada pàgina en la part II il·lustra com interactua amb CSS alguna altra tecnologia. Aquestes pàgines no estan dissenyades per ensenyar com utilitzar aquestes altres tecnologies. Aneu a altres tutorials per aprendre sobre elles en detall.

En lloc d'això, aquestes pàgines estan dissenyades per il·lustrar els molts usos de CSS. Per utilitzar aquestes pàgines, heu de tenir algun coneixement de CSS, però no cal cap coneixement d'unes altres tecnologies.

Secció anterior (Part I): Mitjà
Secció següent: SVG

Informació: JavaScript

JavaScript és un llenguatge de programació. JavaScript s'utilitza àmpliament per proporcionar interactivitat en els llocs web i aplicacions.

JavaScript pot interactuar amb les fulles d'estil, permetent-li escriure programes que canvien l'estil d'un document de forma dinàmica.

Hi ha tres maneres de fer això:

Treballant amb la llista de fulles d'estil del document, per exemple: afegir, eliminar o modificar una fulla d'estil.
Treballant amb les regles en una fulla d'estil, per exemple: afegir, eliminar o modificar una regla.
Treballant amb un element individual en el DOM, modificant el seu estil independentment de les fulles d'estil del document.

Més detalls
Per obtenir més informació sobre JavaScript, vegeu la pàgina de JavaScript en aquest wiki.

Acció: Una demostració de JavaScript

Feu un nou document HTML, doc5.html. Copieu i enganxeu el contingut d'aquí, assegurar-vos de deplaçar-vos per obtenir tota ella;

<!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>

Feu una nova fulla d'estil CSS, style5.css. Copieu i enganxeu el contingut d'aquí:

  #square {
    width: 120px;
    height: 120px;
    border: 2px inset gray;
    margin-bottom: 1em;
  }

  button {
    padding: .5em 2em;
  }

Feu un nou arxiu de text, script5.js. Copieu i enganxeu el contingut d'aquí:

// 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);

Obriu el document en el navegador i premeu el botó o vegeu una mostra del treball a continuació.

{{ EmbedLiveSample('Action:_A_JavaScript_demonstration', 320,320) }}

Notes importants sobre aquesta demostració:

El document HTML vincula la fulla d'estil com de costum, i també vincula el script.
L'script funciona amb elements individuals en el DOM. Modifica l'estil del cuadrat directament. Modifica l'estil del botó indirectament pel canvi d'un atribut.
En JavaScript, document.getElementById("square") és similar en funció al selector CSS #square.
En JavaScript, backgroundColor correspon a la propietat CSS background-color. JavaScript no permet guions en noms, de manera que "camelCase" s'utilitza en el seu lloc.
El vostre navegador té una regla CSS incorporada per button{{ mediawiki.external('disabled=\"true\"') }} que canvia l'aspecte del botó quan està desactivat.

De fet, el document HTML anterior pot tenir una condició de competència (informació relacionada en aquesta pàgina W3C), ja que té l'element script dins de l'element head podent inicar-se l'execució del codi JavaScript abans que la pàgina acabi de carregar-se i el codi no funcionarà perquè la variable button serà nul.la. En moure l'element script sota de l'element button (just damunt de l'etiqueta de tancament body) en el marcat HTML hauria de resoldre aquest problema.

Repte
Canvieu el script perquè el quadre salti a la dreta 20 em quan el seu color canviï, i salti cap a enrere després.

Veure la solució per el repte.

I ara què?

Si teniu dificultats per entendre aquesta pàgina o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de discussió.

En aquesta demostració, el document HTML vincula el script tot i que només l'element button utilitza el script. Mozilla estén CSS de manera que pugui vincular codi JavaScript (i també contingut i altres fulles d'estil) per als elements seleccionats. La pàgina següent mostra això: vincles XBL