CODEWITHSUNDEEP
javascripthtmljquerycssdom
monstereo
monstereo

Reputation: 948

Change Element's Class Name without affecting CSS values

I have an DOM element and I want to only change the className of the element. I want to remain the css values as it. (For both external css and inline css)

For example, if I have this:

.sample{
  display: block
  font-size: 10px,
  font-color: #fff
}

<div class="sample">...</div>

After doing some JavaScript operation I need to reach this:

.newCss{
  display: block
  font-size: 10px,
  font-color: #fff
}

<div class="newCss">...</div>

Note: There is no strict rule for css, there can be a css selector with 100 values or with only 1 one. Note2: There is no css selector such as .newCss, I should transform the css properties from .sample, to a new one called .newCss

Upvotes: 0

Views: 477

Answers (3)

Jack Walker
Jack Walker

Reputation: 41

You have to use JavaScript. In order to use JavaScript, you have to assign a ID to the <div> tag. Then manipulate it by JavaScript. Example: document.getElementById("id1").className="sample";

Also make sure that you using semicolon(;) after CSS properties.

function f1()
{
  document.getElementById("id1").className="sample";
}
.sample{
  display: block;
  font-size: 10px;
  font-color: #fff;
  color: red;
}

.newCss{
  display: block;
  font-size: 10px;
  font-color: #fff;
  color: green;
}
<div id='id1' class="newCss"><p>Hello</p></div>
<button onclick="f1()">Click</button>

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075895

You can get the computed style for the element prior to making the change:

const style = getComputedStyle(theElement);

and then apply that styling to the element directly:

theElement.style.cssText = style.cssText;

Then removing the class won't change the element's styling, because it's styled inline.

Example:

const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
    const cssText = getComputedStyle(theElement).cssText;
    theElement.className = "newCss";
    theElement.style.cssText = cssText;
    console.log("after: ", theElement.className);
}, 800);
.sample{
  display: block;
  font-size: 10px;
  color: #fff;
  background-color: black;
}
.newCss {
  background-color: yellow;
}
<div class="sample">this is the div</div>

If the new class has styling associated with it in CSS, that might affect the styling of the element. If you need to prevent that, change the class first, then assign the CSS text:

Example:

const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
    theElement.style.cssText = getComputedStyle(theElement).cssText;
    theElement.className = "newCss";
    console.log("after: ", theElement.className);
}, 800);
.sample{
  display: block;
  font-size: 10px;
  color: #fff;
  background-color: black;
}
<div class="sample">this is the div</div>

Upvotes: 1

user13581509
user13581509

Reputation:

Well, if you want to change className to a class which is identical, you can simply redefine the class in the style sheet to be equivalent, or you can use inline styles, but the purpose of CSS classes is to keep a unique set of rules, so two identically-ruled CSS classes would defeat the purpose for which they exist, to be unique definitions of CSS rules, so if you want the CSS rules exactly the same, then there wouldn't be a reason to change the className, unless you were referencing it with other JavaScript functions, or if you wanted to add additional styles while keeping the old ones, in such a case:

use classList to dynamically add or remove certain individual classes, while keeping others.

Upvotes: -1

Related Questions