Dynamic CSS using JavaScript

Question

What is a good way to dynamically apply styling (i.e. the value of styles at runtime) to HTML elements with JavaScript?

I am looking for a way to pack a JavaScript widget (JS, CSS and markup) in one component (mainly in an object). The idea would be for the component to encapsulate the styling (so that users have a good API to change it, rather than a more closely related approach for changing CSS directly and with indirect changes). The problem is that a single API call can mean changes to multiple style elements.

The way I did this was to build the CSS and set the style attribute to the appropriate elements (most likely using an identifier to avoid applying changes in other markup areas). This is a good decision? Is there a better way to do this?

Answer 1

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 a time when:

 $("#myId").css("border-color", "#FFFFFF"); 

Vanilla JS:

 var myDiv = document.getElementById("#myId"); myDiv.setAttribute("style", "border-color:#FFFFFF;"); 

Using Css:

You can also use a separate css file containing the different styles needed inside the classes, and depending on the context that you add or remove these classes in your elements.

in your css file you can have classes like

 .myClass { background-color: red; } .myOtherClass { background-color: blue; } 

Using jquery again 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 your css values ​​depend on what the server returns, this solution can be difficult to apply.

Answer 2

The way I did this is to build CSS and set the style attribute for the corresponding 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 add it to the page.

Answer 3

I might misinterpret your question, but it looks like you are asking for a simple architectural scheme. Do you need something that makes it easier for those who use your widget to change it to their characteristics?

If so, then I don’t know of any special template for this without using CSS.

I can tell you that the “widgets” that I found most easily have separate CSS files. I found it quite simple to change them to suit my needs. I think this is because the structure of using CSS with HTML and Javascript is already a good and simple template. I don’t know that there is something better, especially considering that people are already familiar with HTML / CSS relationships.

Answer 4

Using Vanilla JS, you can do something like this.

If you want to add a CSS class named animate to an element with an Id circle , do this as follows.

 var circle = document.getElementById("circle"); circle.classList.add('animate'); 

You can remove a class like this.

 circle.classList.remove('animate'); 

Answer 5

Since you also asked if there is a better way and you are creating a component, I would recommend you the best way to create such a component using the external interface javascript infrastructure, because they dynamically simplify the styles from the box, let's take an example: Vuejs, Reactjs

 ' import React, {Component} from 'react' import styled from 'styled-jss' const Circle = styled('div')({ position: 'absolute', width: 50, height: 50, borderRadius: '50%', background: (props) => ( /* Generates a random or based on props color */ ), transform: (props) => ( /* Generates a random or based on props transform for positioning */ ) }) class Demo extends Component { componentDidMount() { this.tick() } tick = () => { requestAnimationFrame(() => { this.setState({/* Some new state */}, this.tick) }) } render() { return ( <div> {[...Array(amount)].map(() => <Circle />)} </div> ) } } '