Enhance your existing look by incorporating element.style into your designs

Question

Enhance your existing look by incorporating element.style into your designs

Is there a way to add styles onto an html element without overwriting existing css?

element.style {
  "existing css;"
}

I'm trying to achieve the following result:

element.style {
  existing css;
  opacity: 0;
  pointer-events: none;
}

But currently, I am only getting:

element.style {
  opacity: 0;
  pointer-events: none;
}

Is there a method in JavaScript using element.style = "css" for achieving this without just adding a new class? I have attempted:

element.style += "opacity: 0; pointer-events: none;

Any insights or suggestions are welcome and appreciated.

javascript css

Answer 1

Answer №1

Here is the solution:

element.style.setProperty("some_property", "some_value", "important");

This line of code will add the style rule "some_property" with a value of "some_value" and mark it as "important", resulting in

element {some_property: some_value !important;}

.

In your specific scenario, you can use:

element.style.setProperty("opacity", "0");
element.style.setProperty("pointer-events", "none");

to achieve the desired outcome.

Alternatively, I have come across code that suggests a simpler approach like this:

element.style["some_property"] = "some_value";

, but note that you may not be able to specify !important using this method. I have not personally tested this yet!

If you need more information, you can refer to this existing answer on Stack Overflow: here.

Answer 2

Here is the solution:

element.style.setProperty("some_property", "some_value", "important");

This line of code will add the style rule "some_property" with a value of "some_value" and mark it as "important", resulting in

element {some_property: some_value !important;}

.

In your specific scenario, you can use:

element.style.setProperty("opacity", "0");
element.style.setProperty("pointer-events", "none");

to achieve the desired outcome.

Alternatively, I have come across code that suggests a simpler approach like this:

element.style["some_property"] = "some_value";

, but note that you may not be able to specify !important using this method. I have not personally tested this yet!

If you need more information, you can refer to this existing answer on Stack Overflow: here.

Answer 3

Answer №2

let element = document.getElementById("mainDiv");
element.classList.add("newClass");

Answer 4

let element = document.getElementById("mainDiv");
element.classList.add("newClass");

Answer 5

Answer №3

const element = document.querySelector("#div1");
element.classList.add("otherclass");

Answer 6

const element = document.querySelector("#div1");
element.classList.add("otherclass");

Enhance your existing look by incorporating element.style into your designs

Answer №1

Answer №2

Answer №3

Similar questions

Unable to access npm run build on localhost

Avoiding code execution by injections in Javascript/Jquery

Unable to insert menu links into the container

What are some methods to prevent cookies from being overridden?

If padding is included, the width of an element will be affected when using rem

Optimizing your approach to testing deferred always

Can you please guide me on how to convert pug (jade) to html using npm scripts?

Angular is using the previous parameter value upon clicking the button

Blog entries alternating between a pair of distinct hues

Scrollable content with sticky positioning using CSS3 and JavaScript

Guide on how to use JavaScript to make an HTML5 input field mandatory

Displaying incorrect results within the div container

Unable to activate IndexedDb persistence with Firebase v9 in a Next.js PWA

Struggling with implementing a conditional template component within an AngularJS directive

How can you efficiently pass the index as a prop to a child component in React.js when dealing with arrays stored in

Real-time data feeds straight from JSON

Adding a character at the beginning of each loop iteration in a nested array with Vue.js

Is there a way to selectively import specific functions from a file in NextJs/React rather than importing the entire file?

Square-shaped arch chart utilizing Highcharts library

Tips for managing @ManyToMany relationships in TypeORM