RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/tutorials/manipulating_css_with_javascript below:

Manipulating CSS with JavaScript · WebPlatform Docs

Manipulating CSS with JavaScript Summary

In this article we look at the basics of how to manipulate CSS styles using JavaScript.

Information: JavaScript

JavaScript is a programming language. JavaScript is widely used to provide interactivity in web sites and applications. 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

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 type="button" id="clickMe">Click Me</button>

</body>
</html>

Make a new CSS file, style5.css. Copy and paste the content from here:

#square {
  width: 20em;
  height: 20em;
  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:



var square = document.getElementById("square"),
    clickMe = document.getElementById('clickMe'); 
function doDemo () {

  var button = this;
  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");
}

clickMe.onclick = doDemo;

Open the document in your browser and press the button.

What this code does, is that it changes the background color of the #square to #ffaa44. Here’s a JSFiddle so you can see it working live.

Notes on what is happening in the above example:

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 and in a similar way, document.getElementById('clickMe') is similar to #clickMe.
In JavaScript, backgroundColor corresponds to the CSS property background-color. JavaScript does not allow hyphens in names, so “camelCase” is used instead.
Your browser has a built-in CSS rule for button that changes the button’s appearance when it is disabled.