How to edit css style using javascript with complete css code for any component

Question

I'm working on a CSS editor section for my page, I have to add an advanced CSS editor. This editor should apply changes to the site's css using CSS code through a textarea, for example

#para1 {
  text-align: center;
  color: red;
}

how can I edit this css style for "para1"?

NOTE: PARA1 is only an example, actually what I want is that it can identify any ID that I put in it

Answer 1

Try this if you use a class :

$(".para1, .para2").css({"text-align": "left", "color": "blue"});

Try this if you use an id :

$("#para1, #para2").css({"text-align": "left", "color": "blue"});

Answer 2

If you're using vanilla JavaScript and I understood it correctly, this is what you need:

 var para1 = document.getElementById("para1"); para1.style.color = "red"; para1.style.textAlign = "center";

 <p id="para1">Paragraph</p>

Answer 3

using javascript,

let comp = document.querySelector("#para1");
comp.classList.add("newStyles");

This will add newStyles class to comp variable.