{"id":68039,"date":"2019-08-16T18:01:18","date_gmt":"2019-08-16T12:31:18","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=68039"},"modified":"2019-08-22T15:22:46","modified_gmt":"2019-08-22T09:52:46","slug":"javascript-style-attribute","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/","title":{"rendered":"JavaScript Style Attribute &#8211; How to Implement CSS Styles in JavaScript"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1445,&quot;href&quot;:&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/CSS\\\/Pseudo-elements&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20251001020034\\\/https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/CSS\\\/Pseudo-elements&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 07:14:07&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2025-12-13 05:10:29&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-23 20:34:14&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-04 01:26:06&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-25 20:24:04&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-12 05:40:09&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-12 05:40:09&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>While working on a project, we want our webpage to look attractive. Thus, we use different styles and styling techniques to make our website look beautiful and unique. This JavaScript style tutorial will focus on how you can work with JavaScript to <em>add, modify, and remove the various style properties to and from an element<\/em>. You must understand the basics of CSS to grasp the concept entirely. You can continue with this tutorial even if you just know the syntax used in CSS. We will start this tutorial by understanding the various ways to add style to our webpage.<\/p>\n<p><em><strong>The previous <a href=\"https:\/\/data-flair.training\/blogs\/javascript-errors\/\">tutorial on JavaScript Errors<\/a> was interesting, you must check it.<\/strong><\/em><\/p>\n<h2>JavaScript Style and Classes<\/h2>\n<p>Styles are relevant in learning JavaScript because you cannot create a webpage without making it more attractive. You want your website to look in a specific manner and styling your page is the way to go. The styling of the page is necessary if you want to control where and how an element displays itself on the browser.<\/p>\n<p>There are two ways you can add JavaScript style to an element as a programmer:<\/p>\n<ul>\n<li><strong>With the help of style attribute<\/strong><\/li>\n<\/ul>\n<p>One of the ways to add style to your element is by directly defining the properties in a style attribute. The syntax to add a style to an element is as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;element style = \u201c...\u201d&gt;&lt;\/element&gt;<\/pre>\n<ul>\n<li><strong>With the help of class attribute<\/strong><\/li>\n<\/ul>\n<p>Another way you can add styles to an HTML file is by creating a class in CSS, defining its properties, and then adding it to the element. We prefer this approach while adding style to the page because it helps us separate CSS from HTML. The syntax to add a class to an element is as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;element class = \u201c...\u201d&gt;&lt;\/element&gt;<\/pre>\n<p><em><strong>Let&#8217;s revise the <a href=\"https:\/\/data-flair.training\/blogs\/javascript-class\/\">Working of JavaScript Classes<\/a><\/strong><\/em><\/p>\n<h3>className and classList<\/h3>\n<p>Initially, defining the \u201cclass\u201d keyword as an object\u2019s property was not possible. But changing a class is one of the most common actions in the script. To overcome this limitation, the developers introduced a similar-looking property \u201cclassName\u201d that corresponds to the \u201cclass\u201d attribute. This property returns the whole string of classes.<\/p>\n<p>But we often want to add\/remove only a single class. For this purpose, a special object \u201cclassList\u201d with add\/ remove\/ toggle\/contains methods came in the market. The role of these methods are as follows:<\/p>\n<ul>\n<li>The add(\u201cclassName\u201d) method adds a class to the element.<\/li>\n<li>The remove(\u201cclassName\u201d) method deletes a class from the element.<\/li>\n<li>The toggle(\u201cclassName\u201d) method checks if the class exists for the element. If not, it adds the class; if it does, it removes it.<\/li>\n<li>The contains(\u201cclassName\u201d) method checks for a particular class and returns true\/false accordingly.<\/li>\n<\/ul>\n<p>The following JavaScript program uses the className property and all the classList methods to explain\u00a0all of them better.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n    &lt;body&gt;\r\n        &lt;h1 class = \"main heading\"&gt;DataFlair&lt;\/h1&gt;\r\n        &lt;p id=\"para1\"&gt;&lt;\/p&gt;\r\n        &lt;p id=\"para2\"&gt;&lt;\/p&gt;\r\n        &lt;p id=\"para3\"&gt;&lt;\/p&gt;\r\n        &lt;p id=\"para4\"&gt;&lt;\/p&gt;\r\n        &lt;p id=\"para5\"&gt;&lt;\/p&gt;\r\n\r\n        &lt;script&gt;\r\n                \/\/getting the class names of the element\r\ndocument.getElementById(\"para1\").innerHTML = \"The class of &amp;lt;h1&amp;gt; tag is: \" + document.querySelector('h1').className;\r\n\r\n                \/\/adding a class\r\n                document.querySelector('h1').classList.add('myClass');\r\n                document.getElementById(\"para2\").innerHTML = \"&lt;b&gt;After adding a class:&lt;\/b&gt;&lt;\/br&gt;The class of &amp;lt;h1&amp;gt; tag is: \" + document.querySelector('h1').className;\r\n\r\n                \/\/removing a class\r\n                document.querySelector('h1').classList.remove('main');\r\n                document.getElementById(\"para3\").innerHTML = \"&lt;b&gt;After removing a class:&lt;\/b&gt;&lt;\/br&gt;The class of &amp;lt;h1&amp;gt; tag is: \" + document.querySelector('h1').className;\r\n\r\n                \/\/toggling a class\r\n                document.querySelector('h1').classList.toggle('myClass');\r\n                document.getElementById(\"para4\").innerHTML = \"&lt;b&gt;After toggling a class:&lt;\/b&gt;&lt;\/br&gt;The class of &amp;lt;h1&amp;gt; tag is: \" + document.querySelector('h1').className;\r\n                \/\/checking for a class name\r\n                var text = document.querySelector('h1').classList.contains('main');\r\n                document.getElementById(\"para5\").innerHTML = \"&lt;b&gt;Is the class 'main' present?&lt;\/b&gt; \" + text;\r\n        &lt;\/script&gt;\r\n\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68054\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-code.jpg\" alt=\"className and classList code\" width=\"1298\" height=\"740\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-code.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-code-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-code-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-code-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-code-520x296.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68055 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-output.jpg\" alt=\"className and classList output - JavaScript Style\" width=\"1298\" height=\"740\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-output.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/className-and-classList-output-520x296.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<p><strong>Note:<\/strong> classList is iterable, i.e., we can list all the class names with a single loop as we do for an array.<\/p>\n<p><em><strong>Time to master the <a href=\"https:\/\/data-flair.training\/blogs\/javascript-array\/\">concept of JavaScript Array<\/a><\/strong><\/em><\/p>\n<h3>JavaScript Element Style<\/h3>\n<p>The property <strong>element.style<\/strong> corresponds to the JavaScript\u00a0<strong>style<\/strong> attribute in HTML, meaning that the following two statements work in the same way.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">h1.style.color = \u201cgreen\u201d;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;h1 style = \u201ccolor: green\u201d&gt;&lt;\/h1&gt;<\/pre>\n<p>Both the statements above change the font-color of the heading to green. With multi-word properties, like <strong>background-color<\/strong>, we use camelCase (<strong>backgroundColor<\/strong>).<\/p>\n<h3>Playing with JavaScript Styles<\/h3>\n<p>In many cases, we want to change the style of an HTML element. In a project, we may need to change an element property after an event occurs. JavaScript is fully capable of modifying both the class and style properties. The code below shows us how to alter the text-color with a JavaScript statement.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n    &lt;body&gt;\r\n        &lt;h1 id = \"clr\"&gt;DataFlair&lt;\/h1&gt;\r\n\r\n        &lt;script&gt;\r\n            \/\/ JavaScript statement that changes the text-color\r\n            document.getElementById('clr').style.color = 'green';\r\n        &lt;\/script&gt;\r\n\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-style.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68056\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-style.jpg\" alt=\"Implementing JavaScript style\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-style.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-style-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-style-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-style-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-style-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-style-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-style-method-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68057 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-style-method-output.jpg\" alt=\"JavaScript style method output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-style-method-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-style-method-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-style-method-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-style-method-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-style-method-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-style-method-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>It is often much more comfortable to describe these ids and classes in a CSS file and then add them to the HTML element.<\/p>\n<p><em><strong>Wait! Explore the <a href=\"https:\/\/data-flair.training\/blogs\/javascript-event-types\/\">important JavaScript Event Types<\/a> thoroughly<\/strong><\/em><\/p>\n<h3>Don\u2019t forget about the Units<\/h3>\n<p>While working with CSS values, always remember to add the appropriate units after them. In modern browsers, the property works, but the browser always interprets it in px. It means that <strong>padding: 10<\/strong> is the same as <strong>padding: 10px<\/strong>. If you mistakenly skip them, the property won\u2019t work in older browsers. The following code illustrates the different values available in JavaScript.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n    &lt;body&gt;\r\n        &lt;div class = \"myDiv\"&gt;&lt;h1&gt;DataFlair&lt;\/h1&gt;&lt;\/div&gt;\r\n\r\n        &lt;script&gt;\r\n                \/\/selecting the element and storing it in a variable\r\n                var el = document.querySelector(\".myDiv\")\r\n\r\n                el.style.color = \"blue\" \/\/color: \"blue\"\r\n                el.style.width = '20%' \/\/width: 10%\r\n                el.style.margin = 'auto' \/\/margin: auto\r\n                el.style.border = '1px solid gray' \/\/border width, style and color\r\n                el.style.padding = 10 \/\/padding: 10px\r\n        &lt;\/script&gt;\r\n\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68058\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values.jpg\" alt=\"units after CSS values\" width=\"1299\" height=\"742\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-768x439.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-1024x585.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68059 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-output.jpg\" alt=\"units after CSS values output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/units-after-CSS-values-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<h3>The getComputedStyle method<\/h3>\n<p>The above approach is useful when we want to <em>add, remove, or replace a property from the elements<\/em>. But is there a way to read them? How do we get the values from a CSS file if we want to modify them?<\/p>\n<p>Let\u2019s see the results when we try to access a property defined inside the<strong> &lt;style&gt;<\/strong> tag with the help of a JavaScript code and the browser console.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n    &lt;head&gt;\r\n\r\n        &lt;style type=\"text\/css\"&gt;\r\n            h1{\r\n                color: green;\r\n                margin: 20px;\r\n            }\r\n        &lt;\/style&gt;\r\n\r\n        &lt;script type=\"text\/javascript\"&gt;\r\n                alert(document.body.style.color);\r\n        &lt;\/script&gt;\r\n\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n    &lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68060\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method.jpg\" alt=\"getComputedStyle method - JavaScript Style\" width=\"1299\" height=\"743\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-300x172.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-768x439.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-1024x586.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Output:<a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68061 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-output.jpg\" alt=\"getComputedStyle method output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/strong><\/p>\n<p>To resolve this issue, we have another JavaScript method available to us: <strong>getComputedStyle<\/strong>. The syntax for this methods looks something like this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">getComputedStyle(element, [pseudo])<\/pre>\n<p>The <strong>element<\/strong> parameter determines the element you want to read the value for. The optional parameter <strong>pseudo<\/strong>, like <strong>::after<\/strong> is a CSS <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-elements\">pseudo-element<\/a>. An empty string or no argument indicates the element itself.<\/p>\n<p>Let\u2019s see how the above method works with the help of a simple JavaScript program.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n    &lt;head&gt;\r\n\r\n        &lt;style type=\"text\/css\"&gt;\r\n            body{\r\n                background-color: green;\r\n                margin: 20px\r\n            }\r\n        &lt;\/style&gt;\r\n\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n\r\n        &lt;script&gt;\r\n            var computedStyle = getComputedStyle(document.body); \/\/getting the element\r\n            alert(\"Background color: \" + computedStyle.backgroundColor); \/\/getting the element's property\r\n        &lt;\/script&gt;\r\n\r\n        &lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-68062 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2.jpg\" alt=\"getComputedStyle method 2 - JavaScript Style\" width=\"1298\" height=\"744\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-300x172.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-768x440.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-1024x587.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-520x298.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68063 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output.jpg\" alt=\"getComputedStyle method 2 output\" width=\"1299\" height=\"740\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-150x85.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-1024x583.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-520x296.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>After you click OK, the browser will show the following screen.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68064\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-2.jpg\" alt=\"getComputedStyle method output 2\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-2.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-2-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-2-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-2-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-2-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/getComputedStyle-method-2-output-2-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><em><strong>You must definitely check the <a href=\"https:\/\/data-flair.training\/blogs\/javascript-strings\/\">JavaScript Strings Tutorial<\/a><\/strong><\/em><\/p>\n<h2>Summary<\/h2>\n<p>In this tutorial, we learned about JavaScript styles in great depth. The concept is vital for us to understand because we always use different styles while working on a JavaScript project. You must remember the idea while programming. It will ease your workload and provide you with additional functionality.<\/p>\n<p><em><strong>The next article lined up in JavaScript DataFlair Tutorial Series &#8211; <a href=\"https:\/\/data-flair.training\/blogs\/javascript-css\/\">JavaScript CSS<\/a><\/strong><\/em><\/p>\n<p>Now, are you clear with the concept of JavaScript Styles? If you have any queries, share them in the comment section. We will definitely help you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working on a project, we want our webpage to look attractive. Thus, we use different styles and styling techniques to make our website look beautiful and unique. This JavaScript style tutorial will focus&#46;&#46;&#46;<\/p>\n","protected":false},"author":7,"featured_media":68082,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[20883,20884,20882,20881],"class_list":["post-68039","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-classname-and-classlist","tag-getcomputedstyle-method","tag-javascript-element-style","tag-javascript-style"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Style Attribute - How to Implement CSS Styles in JavaScript - DataFlair<\/title>\n<meta name=\"description\" content=\"Master the concept of JavaScript style attribute and classes by learning its implementation, className and classList, element style, adding units after CSS values and getComputedStyle method.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Style Attribute - How to Implement CSS Styles in JavaScript - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Master the concept of JavaScript style attribute and classes by learning its implementation, className and classList, element style, adding units after CSS values and getComputedStyle method.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-16T12:31:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-22T09:52:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Style-and-Classes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"425\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Style Attribute - How to Implement CSS Styles in JavaScript - DataFlair","description":"Master the concept of JavaScript style attribute and classes by learning its implementation, className and classList, element style, adding units after CSS values and getComputedStyle method.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Style Attribute - How to Implement CSS Styles in JavaScript - DataFlair","og_description":"Master the concept of JavaScript style attribute and classes by learning its implementation, className and classList, element style, adding units after CSS values and getComputedStyle method.","og_url":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-08-16T12:31:18+00:00","article_modified_time":"2019-08-22T09:52:46+00:00","og_image":[{"width":802,"height":425,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Style-and-Classes.png","type":"image\/png"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd"},"headline":"JavaScript Style Attribute &#8211; How to Implement CSS Styles in JavaScript","datePublished":"2019-08-16T12:31:18+00:00","dateModified":"2019-08-22T09:52:46+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/"},"wordCount":980,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Style-and-Classes.png","keywords":["className and classList","getComputedStyle method","JavaScript Element Style","JavaScript Style"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/","url":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/","name":"JavaScript Style Attribute - How to Implement CSS Styles in JavaScript - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Style-and-Classes.png","datePublished":"2019-08-16T12:31:18+00:00","dateModified":"2019-08-22T09:52:46+00:00","description":"Master the concept of JavaScript style attribute and classes by learning its implementation, className and classList, element style, adding units after CSS values and getComputedStyle method.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Style-and-Classes.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Style-and-Classes.png","width":802,"height":425,"caption":"JavaScript Style and Classes"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-style-attribute\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Style Attribute &#8211; How to Implement CSS Styles in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team specializes in creating clear, actionable content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Backed by industry expertise, we make learning easy and career-oriented for beginners and pros alike.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam3\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/68039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=68039"}],"version-history":[{"count":7,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/68039\/revisions"}],"predecessor-version":[{"id":68442,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/68039\/revisions\/68442"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/68082"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=68039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=68039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=68039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}