//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 = 20 + "px";
— 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.width = 20 + "px";
— changes #exampleId to 20px wide

//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 = 6 + "px";
#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 {width: 200px;} document.getElementById( "myId" ).style.width = 200 + "px";
#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>
        <meta charset="utf-8">
            //OUTPUT: Changing Text Styles in JS
        <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>Press each button to trigger the code:</p>
        <button id="changeSizeId">
            document.getElementById( "demoId" ).style.fontSize = 40 + "px";
        <button id="changeColorId">
            document.getElementById( "demoId" ).style.color = "#00FF00";
        <button id="changeBackgroundId">
            document.getElementById( "demoId" ).style.backgroundColor = "#003300";
        <button id="changeFontStyleId">
            document.getElementById( "demoId" ).style.fontStyle = "italic";
        <button id="changeFontWeightId">
            document.getElementById( "demoId" ).style.fontWeight = "bold";
        <button id="changeBackId">
            And this button changes it all back...
        <button id="hideId">
            document.getElementById( "demoId" ).style.visibility = "hidden";
        <button id="displayId">
            document.getElementById( "demoId" ).style.visibility = "visible";
            //OUTPUT: this changes size to 40px
            var changeSize = function (){
                var newSize         = 40 + "px";
                document.getElementById("demoId").style.fontSize        = newSize;
            //OUTPUT: this changes the color to green
            var changeColor = function (){
                var newColor        = "#00FF00";
                document.getElementById("demoId").style.color           = newColor;
            //OUTPUT: this changes the background color to dark green
            var changeBackground = function (){
                var newBackground   = "#003300";
                document.getElementById("demoId").style.backgroundColor = newBackground;
            //OUTPUT: this changes the font to italic
            var changeFontStyle = function (){
                var newStyle        = "italic";
                document.getElementById("demoId").style.fontStyle       = newStyle;
            //OUTPUT: this changes the font to bold
            var changeFontWeight = function (){
                var newWeight       = "bold";
                document.getElementById("demoId").style.fontWeight      = newWeight;
            //OUTPUT: this changes everything back
            var changeBack = function (){
                document.getElementById("demoId").style.fontSize        = 16 + "px";
                document.getElementById("demoId").style.color           = "black";
                document.getElementById("demoId").style.backgroundColor = "white";
                document.getElementById("demoId").style.fontStyle       = "normal";
                document.getElementById("demoId").style.fontWeight      = "normal";
            //OUTPUT: this hides the text
            var hideText = function (){
                var newVisibility   = "hidden";
                document.getElementById("demoId").style.visibility      = newVisibility;

            //OUTPUT: this displays the text
            var displayText = function (){
                var newVisibility   = "visible";
                document.getElementById("demoId").style.visibility      = newVisibility;

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

The above code creates this: