Move CSS out of JavaScript file and into CSS class

Question

I have the following JavaScript code with inline CSS.

var container = display.getContainer();
container.style.cssText = 'width:100%;height:100%;z-index:100;object-fit: contain;';
document.body.appendChild(container);

I would like to move the inline CSS to the following class in style.css

.containerClass {
    width:100%;
    height:100%;
    z-index:100;
    object-fit: contain;
}

I have tried the following:

container.addClass('containerClass');

I've been unable to articulate my problem correctly, thus am having trouble finding the precise solution I am after.

Further -how would I go about telling the JavaScript file about the location of .containerClass?

Salvatore · Accepted Answer · 2018-08-18 06:51:04Z

1

Note: The classList property is not supported in Internet Explorer 9.

The following code will work in all browsers -

function addClass() {
  var element, name, arr;
  element = document.getElementById("container");
  name = "mystyle";
  arr = element.className.split(" ");
  if (arr.indexOf(name) == -1) {
    element.className += " " + name;
  }
}

.mystyle {
  background-color: black;
  color: white;
}

div {
  margin-top: 20px;
  width: 100%;
  padding: 25px;
  font-size: 25px;
  box-sizing: border-box;
  border: 1px solid #000;
}

<p>Click the "Add Class" button to add the "mystyle" class to the container element:</p>

<button onclick="addClass()">Add Class</button>

<div id="container">This is a DIV element.</div>

answered Aug 18, 2018 at 6:51

Salvatore

1,4311 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhil Thakur · Accepted Answer · 2018-08-18 04:47:33Z

1

In you style.css, define the properties for .containerClass.

style.css :

.containerClass {
    width:100%;
    height:100%;
    z-index:100;
    object-fit: contain;
}

When you want to add this styling, just add that class to the element you want to using javascript. Javascript:

var container = document.getElementById("elementId");
container.classList.add("containerClass");

edited Aug 18, 2018 at 4:47

answered Aug 18, 2018 at 4:39

Nikhil Thakur

3431 silver badge8 bronze badges

3 Comments

pcgben Over a year ago

Beautiful. Now how to I tell the JS file how to find that class in the CSS file?

Nikhil Thakur Over a year ago

You don't need to tell anything to javascript. Say for example you want to add .containerClass to a <div id="someId">...</div>. After running the above code, the div will become <div id="someId" class="containerClass">...</div> and the style will be automatically applied.

Nikhil Thakur Over a year ago

Just don't forget to include you style.css in your html file.

Collectives™ on Stack Overflow

Move CSS out of JavaScript file and into CSS class

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related