How to Get an Object’s Keys and Values in JavaScript
In JavaScript, getting the keys and values that comprise an object is very easy. You can retrieve each object’s keys, values, or both combined into an
How to Set Style to an HTML element using JavaScript
An HTML element’s style is determined by the CSS applied to the element.
Cascading Style Sheets (CSS) are used to design the layout of a webpage.
You can set an element’s style either in the HTML document itself, by adding an external CSS file, or by using JavaScript.
Setting style with CSS
There are three ways CSS can be applied to an HTML document:
- Inline – by using the style attribute inside the HTML elements to be styled
- Internal – by using a <style> element in the document’s <head>
- External – by using a <link> element which links to an external CSS file
All three are explored below.
Set inline style
To set the inline style, simply set the style attribute on the HTML element as follows:
HTML
<h2 class="h2colored" style="color:blue">
I'm blue
</h2>
In the example above, the <h2> element’s text will appear blue on the user’s screen.
Note: Inline CSS is the most specific, and thus has precedence over the other two approaches. Inline CSS overrides most other CSS declarations.
Set internal style
To set an internal style that applies to elements in the entire HTML document, you can add a <style> element to the document’s <head> element, as follows:
HTML
<head>
<title>Document</title>
<style>
.example {
color: blue;
}
</style>
</head>
<body>
<h1 class="example">
I'm blue
</h1>
</body>
In the example above, every HTML element that has the class “example” will appear blue on the user’s screen.
Note: It is possible to use elements like <h1> under the <style> tag as well.
Set external style
You can also set the document’s CSS by linking to an external stylesheet. To do so, include a link to the CSS file in the document’s <head> element, as follows:
HTML
<head>
<link rel="stylesheet" href="/style/style.css">
</head>
The href attribute should contain the name and location of the CSS file you wish to add to the document. This CSS file contains information on the styles to be applied to your document – below is an example:
CSS
.exmaple {
color: blue;
}
Setting style with JavaScript
There are a few ways to set an HTML element’s style with JavaScript.
The most direct method is by using the style property, as follows:
JavaScript
// Enlarge font size of an element
largeFonts();
function largeFonts() {
const el = document.querySelector('p');
el.style.fontSize = '2rem';
}
HTML
<p>
Difficult to read?
</p>
The above code applies a style that makes the <p> element’s text appear larger on the user’s screen.
Syntax
Below is the syntax for manipulating the style property on an HTML element using JavaScript:
Element.style.CSSproperty = value
Element: An HTML element
CSSproperty: a valid CSS property (e.g. color).
Note: While using the style property, CSS properties are written in camelCase and not with the more standard snake-case.
value: the value must be a string that contains information that matches the expected CSS property requirements.
Note: You can only use the style property on single elements. The document.querySelector() method returns the first element that matches the selector (e.g. p). The return value from this function will always be a single element or, if no matching element is found, null.
Note: Using the style property in this way adds inline styling to the element.
There are two other ways to set style using JavaScript. The first is to use the setAttribute() method. The second is by adding a class using the add() method of the classList property. The class you add can then be handled using external CSS styling.
Related Articles
JavaScript – How to Use setAttribute
Related Posts
How to Use the Assignment Operator in JavaScript
The Assignment operator is used to assign a value to a variable. Assignment (=) The assignment operator simply assigns the value of the right operand to
How to Use the for…in Statement in JavaScript
The for…in statement is used to loop through an object’s properties. Basic for…in loop example The following code demonstrates a basic example using the for…in statement