Add inline style using Javascript

Active3 hr before
Viewed126 times

7 Answers


This should add an inline style to the element.,I'm attempting to add this code to a dynamically created div element,Ask Different (Apple),Electrical Engineering = '330px'; = 'left';
load more v

First, select the paragraph element whose id is content by using the querySelector() method.,The following example uses the style object to set the CSS properties of a paragraph with the id content:,You can use this css() function to set multiple styles for an element with the id #content as follows:,To set the inline style of an element, you use the style property of that element:

To set the inline style of an element, you use the style property of that element:

.wp - block - code {
      border: 0;
      padding: 0;

   .wp - block - code > div {
      overflow: auto;

   .shcb - language {
      border: 0;
      clip: rect(1 px, 1 px, 1 px, 1 px); -
      webkit - clip - path: inset(50 % );
      clip - path: inset(50 % );
      height: 1 px;
      margin: -1 px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1 px;
      word - wrap: normal;
      word - break: normal;

   .hljs {
      box - sizing: border - box;

   .hljs.shcb - code - table {
      display: table;
      width: 100 % ;

   .hljs.shcb - code - table > .shcb - loc {
      color: inherit;
      display: table - row;
      width: 100 % ;

   .hljs.shcb - code - table.shcb - loc > span {
      display: table - cell;

   .wp - block - code code.hljs: not(.shcb - wrap - lines) {
      white - space: pre;

   .wp - block - code code.hljs.shcb - wrap - lines {
      white - space: pre - wrap;

   .hljs.shcb - line - numbers {
      border - spacing: 0;
      counter - reset: line;

   .hljs.shcb - line - numbers > .shcb - loc {
      counter - increment: line;

   .hljs.shcb - line - numbers.shcb - loc > span {
      padding - left: 0.75 em;

   .hljs.shcb - line - numbers.shcb - loc::before {
      border - right: 1 px solid #ddd;
      content: counter(line);
      display: table - cell;
      padding: 0 0.75 em;
      text - align: right; -
      webkit - user - select: none; -
      moz - user - select: none; -
      ms - user - select: none;
      user - select: none;
      white - space: nowrap;
      width: 1 % ;
element.styleCode language: CSS(css)
load more v

Inline styles are applied directly to the specific HTML element using the style attribute. In JavaScript the style property is used to get or set the inline style of an element.,Similarly, you get the styles applied on the HTML elements using the style property.,You can also get or set CSS classes to the HTML elements using the className property.,In the following section we'll discuss the various methods of setting styles in JavaScript.

<!DOCTYPE html>
<html lang="en">

   <meta charset="utf-8">
   <title>JS Set Inline Styles Demo</title>

   <p id="intro">This is a paragraph.</p>
   <p>This is another paragraph.</p>

      // Selecting element
      var elem = document.getElementById("intro");

      // Appling styles on element = "blue"; = "18px"; = "bold";

load more v

Note: See the CSS Properties Reference for a list of the CSS properties accessible via style. The style property has the same (and highest) priority in the CSS cascade as an inline style declaration set via the style attribute.,The style read-only property returns the inline style of an element in the form of a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.,While this property is considered read-only, it is possible to set an inline style by assigning a string directly to the style property. In this case the string is forwarded to CSSStyleDeclaration.cssText. Using style in this manner will completely overwrite all inline styles on the element.,Note the presence of the value bold for font-weight in the computed style and the absence of it in the element's style property

style =
load more v

var elem = document.querySelector('#some-element');

// Set color to purple = 'purple';

// Set the background color to a light gray = '#e5e5e5';

// Set the height to 150px = '150px';
load more v

To style an element with the inline style attribute, the value must be a JavaScript object:,You can also create an object with styling information, and refer to it in the style attribute:,Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax:,Insert an object with the styling information:

Insert an object with the styling information:

class MyHeader extends React.Component {
  render() {
    return (
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
load more v

An inline style may be used to apply a specific style to a single element. You should consider switching to adding styles using classes if you see yourself adding the same inline style to multiple elements.,In React, you can set styles in multiple ways, including using classes, IDs, or inline styles. In this guide, you will learn how to style your components using the inline style method.,Combine multiple style objects using the spread operator.,You can also use the Object.assign() method to combine multiple styles.

1<h1 style="color:green;text-align:center;">Inline Style</h1>
load more v

Other "style-using" queries related to "Add inline style using Javascript"