How to adjust custom css properties dynamically?

Question

I am creating a js for an HTML file. I want to manipulate the css of the div.

One of the ways is to use this: -

div.style.left = "30px";

However, in my code user tells how the HTML is to be manipulated. I want to make it dynamic. I have set a variable with the property I want to change like this: -

let myProperty = "top", value = "30px";

Now, I want to use this as my CSS modifier in js like this: -

myDiv.style.myProperty = value;

I have tried setAttributes() which is not working. How can I do this?

segFault · Accepted Answer · 2021-08-21 16:39:38Z

4

You have to use square brackets to access an object property using a variable.

For example:

let myProperty = "top", value = "30px";
myDiv.style[myProperty] = value;

answered Aug 21, 2021 at 16:39

segFault

4,0541 gold badge21 silver badges34 bronze badges

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

Comments

Shamxeed · Accepted Answer · 2021-08-21 16:50:45Z

2

In your style.css create two different styles with different class names.

In your HTML use the default styling.

In your JS:


const someHTMLTag = document.getElementById("demo")

if(condition) {

   someHTMLTag.className = firstStyle

} else {

   someHTMLTag.className = secondStyle

}

answered Aug 21, 2021 at 16:50

Shamxeed

5321 gold badge5 silver badges9 bronze badges

Comments

Ranisimo · Accepted Answer · 2021-08-21 16:50:56Z

1

I don't have enough reputation to add a comment to get more information, but here's my attempt at providing you with an answer to what you have written in your original question.

You could provide the div with a class or id in the HTML (<div id="idName">...</div>) and have the js file access it via the DOM.

var myDiv = document.getElementById("idName");
myDiv.setAttribute("class", "className");

Or

var myDiv = document.getElementById("idName");
myDiv.style.value = "30px";

answered Aug 21, 2021 at 16:50

Ranisimo

3513 bronze badges

Collectives™ on Stack Overflow

How to adjust custom css properties dynamically?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related