Controlling HTML and CSS with JavaScript


JavaScript can control all the elements in an HTML document. It can also change CSS styles or create new styles. You can also use JavaScript to program buttons that read user input from a textfield. You can then use that input in your program. If you know how to do this, it’s the first and most important step to starting to build
games and applications. Let’s find out how.

Creating new text in an HTML element

All HTML elements have a property called innerHTML. The innerHTML property represents the text that’s between a pair of opening and closing tags.

<p>All this stuff between the tags is the innerHTML</p>

You can access the innerHTML of any element by using JavaScript. Here’s how it works.

Imagine that you’ve got an empty HTML element with an id called output.

<p id="output"></p>

JavaScript first needs to know that output is referring to the element’s id. You use a built-in JavaScript method called document.querySelector to do this:

document.querySelector("#output");

It searches through the HTML document until it finds an element with the id output.

The next step is to store this information in a variable. You can give the variable any name you like, but it’s simplest just to give it the same name as the id of the element you’re looking for. Here’s how to assign the element to a variable called output.

var output = document.querySelector("#output");

This new output variable now directly refers to the <p id="output"> tag in the HTML document. It’s what connects the HTML code to the JavaScript code.

Note: This shows you that variables can store more than just a numbers, strings, or true/false values. You can store almost anything in a variable.

You can now use this variable to change what the element is displaying with innerHTML like this:

output.innerHTML = "Hello World!";

Now the element will display “Hello World!” directly in the web browser. The HTML code has actually been changed by JavaScript so that it looks like this:

<p id="output">Hello World!</p>

It’s a neat trick. You won’t see this change in your code, but it’s happening invisibly behind the scenes in the web browser. Let’s look at a real live HTML document that shows exactly how this works.

<!doctype html>
<html>
    <head>
        <title>Display HTML text</title>
    </head>
    <body>
        <p id="output"></p>
        <script>
            var output = document.querySelector("#output");
            output.innerHTML = "Hello World!";
        </script> 
    </body>
</html>

As you would expect, this HTML document displays “Hello World!” The text has been added to the empty <p> tag just using JavaScript.

In this example I used document.querySelector to find an element with a specific id. You can also use it to find a specific class. Just replace the hash symbol, #, with a dot.. Here’s how you would find a class called button:

document.querySelector(".button");

This is the same as in CSS: A hash refers to an id, and a dot refers to a class. You can refer to HTML tags directly by just using the tag name, without a hash or a dot. Here’s how you could find the <body> tag:

document.querySelector("body");

Note: If you have more than one tag with the same name in your HTML document, such as lots of <p> tags, document.querySelector will just find the first one. To find all of the tags with the same name, you can use document.querySelectorAll. It will give you a list of all the tags in the HTML document with the same name. The list will be in a format called an array.

Changing CSS with JavaScript

You can use JavaScriptto change any element’s CSS styles. Here’s a simple example. The JavaScript code in this HTML document changes the style of the words “Hello World!” It makes them red, 50 pixels in height, and underlined. Can you see how?

<!doctype html>
<html>
    <head>
        <title>Change CSS</title>
    </head>
    <body> 
        <p class="example">Hello World!</p>
        <script>
            var example = document.querySelector(".example");
            example.style.color = "red";
            example.style.fontSize = "50px";
            example.style.textDecoration = "underline";
        </script>
    </body>
</html>

This works in very much the same way as the previous examples. First, document.querySelector is used to find an element with the class name example.

var example = document.querySelector(".example");

It’s copied into a variable also called example.

Next, the CSS styles are changed by using this format:

example.style.anyCSSproperty = "value";

This is code that changes the element’s style:

example.style.color = "red";
example.style.fontSize = "50px";
example.style.textDecoration = "underline";

Notice that all the style values are surrounded by quotation marks. These values are the same as any values you would give to style properties in CSS code.

The names of the CSS properties are also the same as any ordinary CSS properties. If you want to change a font color, just use the CSS color property, like this:

example.style. color = "red";

The only difference in property names is with properties that are composed of more than one word. In CSS, this is the property that affects font size:

font-size

In JavaScript, that same property is written like this:

fontSize

The dash between the words is removed and the second word is capitalized. All CSS properties that use a dash to separate words are written like this in JavaScript.

Just keep this simple format in mind and you can change any element’s CSS properties with JavaScript.

Show Comments