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

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";

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          = "bold";
                document.getElementById("buttonID").style.fontWeight         = "italic";
            }     

            //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>
        
        <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";
            }
            
            //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;
        </script>
    </body>
</html>

The above code creates this: