<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>
<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><p id="demoId">This paragraph...</p></code>
</p>
<p>Press each button to trigger the code:</p>
<button id="changeSizeId">
document.getElementById( "demoId" ).style.fontSize = 40 + "px";
</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>
<br>
<button id="hideId">
document.getElementById( "demoId" ).style.visibility = "hidden";
</button>
<br><br>
<button id="displayId">
document.getElementById( "demoId" ).style.visibility = "visible";
</button>
<script>
//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;
</script>
</body>
</html>The above code creates this: