Javascript DOM STYLE
How to Style Using Javascript?
One of the biggest uses of javascript is in styling HTML elements dynamically. Using javascript we can add or remove CSS property to any element.
You can set color, background, border, animation, font style, text alignments, width, height, padding, position and so on.
CSS should always be preferred for styling of elements. Only in case we need some dynamic action we can use javascript.
In this section we will learn various methods of styling elements using javascript.
Changing Element Style
To Change style of an elements:
- Select the element, example -
getElementById
- Use style property to the element
- Then concatenate CSS property to that and assign value in quotes.
Syntax:
Let's change the color of the <p>
tag in example below.
Example: setting style using javascript
In the above example we set color to the paragraph directly using javascript, but we can also set style or change style of any element when an event is fired. Events could be anything like page load, button click, mouse move, page scroll etc.
We will learn more about events in the next chapter. Lets see an example which uses the 'onclick' method to change the color of a paragraph.
Example: changing style when an event is fired
Changing CSS property having hyphen
Javascript does not accept hyphen in variable name, function name or in property name, and suppose we want to add 'background-color', then what should we do?
Javascript accepts such property when provided in camelcase. Example 'background-color' => 'backgroundColor'
Property name in CSS | To | in Javascript |
---|---|---|
background-color | => | backgroundColor |
background-image | => | backgroundImage |
border-bottom | => | borderBottom |
border-top | => | borderTop |
box-shadow | => | boxShadow |
font-size | => | fontSize |
font-family | => | fontFamily |
line-height | => | lineHeight |
and so on... |
Lets see some examples.
Example: changing backgroundColor using javascript
Adding border property to the element
Example: adding border to element
Creating Animation Using Javascript
Using Above javascript style properties we can create cool animation. With these only limits in creating animation is our imagination.
Let's create a simple animation of a moving ball.
Example: adding border to element