What is a good way to apply styling dynamically (i.e. the value of styles are created at runtime) to HTML elements with JavaScript?
I'm looking for a way to package a JavaScript widget (JS, CSS and markup) in a single component (basically, an object). The idea would be for the component to encapsulate styling (so users have a nice API to modify it instead of a more tightly coupled approach of modifying the CSS directly and having changes applied indirectly). The problem is that a single API call might imply changes to several styling elements.
The way I would do it is to construct the CSS and set thestyle
atrribute to the proper elements (most likely using the ID to avoid applying changes to other areas of the markup). Is this a good solution? Is there a better way to do it?
JavaScript can also be used to load a CSS file in the HTML document.
If you want to change the CSS styles dynamically you'll have to attach this portion of code to some event. For example, if you want to change the styles of your element when clicking on a button, then you have to first listen to the click event and attach a function containing the previous code.
The better way is to add css classes which you want to add and then use addClass to add css dynamically.
color = "red"; you can apply the style change dynamically. Below is a function that turns an element's colour to red when you pass it the element's id . You could also use setAttribute(key, value) to set a style on an element. For example, you could set the colour of an element to red by calling element.
Using Jquery
Use the css() function to apply style to existing elements where you pass an object containing styles :
var styles = {
backgroundColor : "#ddd",
fontWeight: ""
};
$("#myId").css(styles);
You can also apply one style at the time with :
$("#myId").css("border-color", "#FFFFFF");
Vanilla JS :
var myDiv = document.getElementById("#myId");
myDiv.setAttribute("style", "border-color:#FFFFFF;");
With Css :
You can also use a separate css file containing the different styles needed inside classes, and depending on the context you add or remove those classes to your elements.
in your css file you can have classes like
.myClass {
background-color: red;
}
.myOtherClass {
background-color: blue;
}
Again using jquery, to add or remove a class to an element, you can use
$("#myDiv").addClass('myClass');
or
$("#myDiv").removeClass('myClass');
I think this is a cleaner way as it separates your style from your logic. But if the values of your css depends from what is returned by the server, this solution might be difficult to apply.
The way I would do it is to construct the CSS and set the style attribute to the proper elements. For example:
var div = document.createElement('div');
div.setAttribute("style", "color: blue, margin-top:5px");
document.body.appendChild(div);
This code will create a new div element with the style color: blue, margin-top:5px
and append it to the page.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With