//OUTPUT: Changing text styles

<New code>

//OUTPUT: document.getElementById("exampleID").style.color = "red";
— changes #exampleID to red
//OUTPUT: document.getElementById("exampleID").style.backgroundColor = "pink";
— changes #exampleID's background to pink
//OUTPUT: document.getElementById("exampleID").style.fontSize = "20px";
— changes #exampleID to 20px type
//OUTPUT: document.getElementById("exampleID").style.fontStyle = "italic";
— changes #exampleID to italic type
//OUTPUT: document.getElementById("exampleID").style.fontWeight = "bold";
— changes #exampleID to bold type

//OUTPUT: document.getElementById("exampleID").style.visibility = "hidden";
— changes #exampleID to bold type
//OUTPUT: document.getElementById("exampleID").style.visibility = "visible";
— changes #exampleID to bold type

Almost everything that CSS does can be done with Javascript

You can program style changes to your webpage using javascript by using document.getElementById('exampleID').style

It works a lot like CSS. In fact, inside the browser programmed style changes are actually altering the CSS of your page as your program runs.

That's why CSS and Javascript style commands are so darn similar.

The main difference is that CSS commands that would normally be hyphenated, like background-color is camelCased in Javascript: backgroundColor.

In CSS: In Javascript
#myID {color: purple;} document.getElementById("myID").style.color = "purple";
#myID {background-color: pink;} document.getElementById("myID").style.backgroundColor = "pink";
#myID {font-size: 6px;} document.getElementById("myID").style.fontSize = "6px";
#myID {font-style: italic;} document.getElementById("myID").style.fontStyle = "italic";
#myID {font-weight: bold;} document.getElementById("myID").style.fontWeight = "bold";
#myID {text-align: center;} document.getElementById("myID").style.textAlign = "center";
#myID {vertical-align: middle;} document.getElementById("myID").style.verticalAlign = "middle";
#myID {visibility: hidden;} document.getElementById("myID").style.visibility = "hidden";
#myID {visibility: visible;} document.getElementById("myID").style.visibility = "visible";

Short code example:

This button uses the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    
    <body>
        <button id="buttonID">
            Change me!
        </button>
        
        <script>
            //OUTPUT: change the style of the button
            var changeButtonStyle = function (){
                document.getElementById("buttonID").style.fontSize           = "30px";
                document.getElementById("buttonID").style.color              = "darkblue";
                document.getElementById("buttonID").style.backgroundColor    = "lightblue";
                document.getElementById("buttonID").style.fontStyle          = "italic";
                document.getElementById("buttonID").style.fontWeight         = "bold";
            }     

            //INPUT: attach changeButtonStyle to buttonID
            document.getElementById('buttonID').onclick = changeButtonStyle;
        </script>
    </body>
</html>

Longer code example:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> //OUTPUT: Changing Text Styles in JS </title> </head> <body> <h1>//OUTPUT: Changing text styles</h1> <p id="demoID"> This paragraph has been assigned <code>id="demoID"</code>, like:<br> <code>&lt;p id="demoID">This paragraph ...&lt;/p></code> </p> <p>Press each button to trigger the code:</p> <button id="changeSizeID"> document.getElementById("demoID").style.fontSize = "40px"; </button><br> <button id="changeColorID"> document.getElementById("demoID").style.color = "#00FF00"; </button><br> <button id="changeBackgroundID"> document.getElementById("demoID").style.backgroundColor = "#003300"; </button><br> <button id="changeFontStyleID"> document.getElementById("demoID").style.fontStyle = "italic"; </button><br> <button id="changeFontWeightID"> document.getElementById("demoID").style.fontWeight = "bold"; </button><br> <button id="changeBackID"> And this button changes it all back... </button> <button id="hideID"> document.getElementById("demoID").style.visibility = "hidden"; </button> <button id="displayID"> document.getElementById("demoID").style.visibility = "visible"; </button> <script> //OUTPUT: this changes size to 40px var changeSize = function (){ document.getElementById("demoID").style.fontSize = "40px"; } //OUTPUT: this changes the color to green var changeColor = function (){ document.getElementById("demoID").style.color = "#00FF00"; } //OUTPUT: this changes the background color to dark green var changeBackground = function (){ document.getElementById("demoID").style.backgroundColor = "#003300"; } //OUTPUT: this changes the font to italic var changeFontStyle = function (){ document.getElementById("demoID").style.fontStyle = "italic"; } //OUTPUT: this changes the font to bold var changeFontWeight = function (){ document.getElementById("demoID").style.fontWeight = "bold"; } //OUTPUT: this changes everything back var changeBack = function (){ var id = document.getElementById("demoID"); id.style.fontSize = "16px"; id.style.color = "black"; id.style.backgroundColor = "white"; id.style.fontStyle = "normal"; id.style.fontWeight = "normal"; } //OUTPUT: this hides the text var hideText = function (){ document.getElementById("demoID").style.visibility = "hidden"; } //OUTPUT: this displays the text var displayText = function (){ document.getElementById("demoID").style.visibility = "visible"; } //INPUT: attach changeSize to changeSizeID document.getElementById("changeSizeID").onclick = changeSize; //INPUT: attach changeColor to changeColorID document.getElementById("changeColorID").onclick = changeColor; //INPUT: attach changeBackground to changeBackgroundID document.getElementById("changeBackgroundID").onclick = changeBackground; //INPUT: attach changeFontStyle to changeFontStyleID document.getElementById("changeFontStyleID").onclick = changeFontStyle; //INPUT: attach changeFontWeight to changeFontWeightID document.getElementById("changeFontWeightID").onclick = changeFontWeight; //INPUT: attach changeBack to changeBackID document.getElementById("changeBackID").onclick = changeBack; //INPUT: attach hideText to hideID document.getElementById("hideID").onclick = hideText; //INPUT: attach displayText to displayID document.getElementById("displayID").onclick = displayText; </script> </body> </html>

The above code creates this: