How to adjust custom css properties dynamically?

user_8522639 0
Viewed 66

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?

frontend css html javascript
3 Answers

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;
user_15140490

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

}
user_136088420

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";
user_166421290
Related