How To Set Style To An HTML Element Using JavaScript - Tabnine

Home » Add Css Property To Element Javascript » How To Set Style To An HTML Element Using JavaScript - Tabnine

Maybe your like

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:

  1. Inline – by using the style attribute inside the HTML elements to be styled
  2. Internal – by using a <style> element in the document’s <head>
  3. 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

JavaScript – How to Set an HTML Element’s Class

JavaScript – How to Get an Input’s Value

Tag » Add Css Property To Element Javascript