How To Add Prefix in Class's Name Using JavaScript

Question

Hi All I am new in JavaScript. I have one HTML file. And I need to add some word in the class's name. Is there any way to do it using JavaScript?

For Example

<!Doctype HTML>
<html>
    <head>
        <style>
            .heading{color:red;}   
            .text{color:red;}   
        </style>
    </head>
    <body>
        <h1 class="heading">This is heading.</h1>
        <p class="text">This is my text.</p>
    </body>
</html>

In need to add "test-" in the class name in head and body both using JavaScript.

After using JavaScript function it should look like this.

<!Doctype HTML>
<html>
    <head>
        <style>
            .test-heading{color:red;}   
            .test-text{color:red;}   
        </style>
    </head>
    <body>
        <h1 class="test-heading">This is heading.</h1>
        <p class="test-text">This is my text.</p>
    </body>
</html>

It would be great help! Thanks in advance.

Why don't you simply rename the classes in the file? If you must change the selectors, please see stackoverflow.com/a/17454470/1169519 — Teemu
– Teemu, Commented Sep 18, 2017 at 11:26
Hi, welcome to SO. If you have written code for this that you can't get to work, then you have come to the right place. Just edit your question and add the relevant parts of your code into it, because without that we cannot help. Please see How to Ask. — Peter B
– Peter B, Commented Sep 18, 2017 at 11:37

score 0 · Accepted Answer · 2017-09-18 11:37:37Z

0

//$(".heading").addClass('test-heading').removeClass('heading');

//$(".text").addClass('test-text').removeClass('text')

$('.text').attr('class', function() {
    return $(this).attr('class').replace('text', 'test-text');
});

$('.heading').attr('class', function() {
    return $(this).attr('class').replace('heading', 'test-heading');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
    <head>
        <style>
            .heading{color:red;}   
            .text{color:red;}   
        </style>
    </head>
    <body>
        <h1 class="heading">This is heading.</h1>
        <p class="text">This is my text.</p>
    </body>
</html>

edited Sep 18, 2017 at 11:37

answered Sep 18, 2017 at 11:31

user8317956

Sign up to request clarification or add additional context in comments.

1 Comment

Teemu Over a year ago

This doesn't answer the question at all, OP wants to manipulate the stylesheet.

4b0 · Accepted Answer · 2017-09-18 11:37:51Z

0

You can loop Inside the body and add new class.

$("body").children().each(function(index, element) {
  var oldclass = $(this).attr('class');
  var newClass = "test_" + oldclass
  $(this).removeClass(oldclass).addClass(newClass);

});

.test_heading {
  color: blue;
}

.test_text {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <style>
    .heading {
      color: red;
    }
    
    .text {
      color: red;
    }
  </style>
</head>

<body>
  <h1 class="heading">This is heading.</h1>
  <p class="text">This is my text.</p>
</body>

</html>

answered Sep 18, 2017 at 11:37

4b0

22.4k30 gold badges97 silver badges143 bronze badges

5 Comments

TechGirl Over a year ago

This will only update one class if the element has multiple classes

4b0 Over a year ago

Op didn't say there is multiple class.There are so many way to do this.

Teemu Over a year ago

This doesn't answer the question at all, OP wants to manipulate the stylesheet.

Pratik Gupta Over a year ago

The code I put that was example. I need to use some kind of function using JavaScript. So every class can have the "text-" prefix. I need to do this because. I need to preview my HTML portfolio in modal. And it is clashing with the page CSS. That is why I need to change the class name in the HTML. Like gmail does when it gets the email in their account.

4b0 Over a year ago

So you can loop and change your class when you load your html in modal instead of change on document.ready ?

TechGirl · Accepted Answer · 2017-09-18 11:39:20Z

0

Find all classes of any element, loop through it, add new class and remove existing classes

var element = "body";
var className= "test-";
var classes = $(element).attr('class').split(" ");
classes.forEach(function(i,obj){
 $(element).addClass(className + i);
 $(element).removeClass(i);
});

answered Sep 18, 2017 at 11:39

TechGirl

4782 silver badges12 bronze badges

4 Comments

Teemu Over a year ago

This doesn't answer the question at all, OP wants to manipulate the stylesheet.

Teemu Over a year ago

Nope, it is just changin class names of some elements.

TechGirl Over a year ago

You cannot rename a class, you can instead add/remove the classes. OP wants to add a prefex, and it will work just fine. @Teemu

Teemu Over a year ago

Ofcourse I can. Reading the code in the post clearly shows, that the stylesheet is also changed. I've to admit, that probably it is not what they actually need, though = ).

Collectives™ on Stack Overflow

How To Add Prefix in Class's Name Using JavaScript

3 Answers 3

1 Comment

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related