ChangeSize Example

ChangeSize Example -- Source Code

HTML Page -- index.htm

<!DOCTYPE html>

<!-- ChangeSize Example
Source code file: index.htm 
When the mouse cursor enters the h1 header,
the header doubles its size; when the mouse
cursor leaves, it returns to normal. -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ChangeSize Example</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>ChangeSize Example</h1>

        <p>Mouseenter the ChangeSize h1 header to double its size.
           When the mouse leaves the header changes back to its
           default size.</p>
    </body>
</html>

CSS Page -- styles.htm

/* ChangeSize Example
   Source code file: index.htm 
   When the mouse cursor enters the h1 header,
   the header doubles its size; when the mouse
   cursor leaves, it returns to normal. */

body { color: navy; font-family: Verdana; }
h1 { font-size: 20pt;
     font-weight: bold;
     font-family: Comic Sans MS, sans-serif; }

Script Page -- script.js

// ChangeSize Example
// Source code file: index.htm 
// When the mouse cursor enters the h1 header,
// the header doubles its size; when the mouse
// cursor leaves, it returns to normal.

function increaseSize( ) {
    var h1Obj = document.querySelector("h1");
    h1Obj.style.fontSize = "40pt";
}

function decreaseSize( ) {
    var h1Obj = document.querySelector("h1");
    h1Obj.style.fontSize = "20pt";
}

function init( ) {
    var h1Obj = document.querySelector("h1");
    h1Obj.addEventListener("mouseenter", increaseSize);
    h1Obj.addEventListener("mouseleave", decreaseSize);
}

window.addEventListener("load", init);