JavaScriptを使用してクラス名にプレフィックスを追加する方法

こんにちはすべて私はJavaScriptで新しいです。私は1つのHTMLファイルを持っています。クラスの名前にいくつかの言葉を追加する必要があります。 JavaScriptを使用してそれを行う方法はありますか？JavaScriptを使用してクラス名にプレフィックスを追加する方法

例

<!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>

必要とするために頭と体の両方JavaScriptを使用して、クラス名に「テスト - 」を追加します。

JavaScript関数を使用した後は、次のようになります。

<!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>

大変助かります！前もって感謝します。

出典

2017-09-18 Pratik Gupta

を削除しますか？セレクタを変更する必要がある場合は、https://stackoverflow.com/a/17454470/1169519 – Teemu

をご覧ください。こんにちは、ようこそ。あなたが仕事に就くことができないこのためのコードを書いていれば、あなたは正しい場所に来ました。あなたのコードの関連する部分を追加してください。それがなければ、私たちは手伝ってくれることはありませんので、あなたの質問を編集してください（https://stackoverflow.com/posts/46278135/edit）。 [ask]を見てください。 –

//$(".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>

出典

2017-09-18 11:31:34 anu

これは全く質問に答えない、OPはスタイルシートを操作したい。 – Teemu

あなたは、本体内部ループと、新しいクラスを追加することができます。

$("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>

出典

2017-09-18 11:37:51

これは要素に複数のクラスがある場合にのみ1つのクラスを更新します – TechGirl

Opは複数のクラスがあるとは言いませんでした。 –

これは全く質問に答えない、OPはスタイルシートを操作したい。 – Teemu

なぜあなたは、単にファイル内のクラスの名前を変更しないでください、それを介して、ループを任意の要素のすべてのクラスを検索し、新しいクラスを追加し、既存のクラス

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

出典

2017-09-18 11:39:20 TechGirl

これは全く質問に答えません、OPは、スタイルシートを操作したいです。 – Teemu

それは操作していない？ @ Teemu – TechGirl

いいえ、それはちょうどいくつかの要素のクラス名を変更しています。 – Teemu

JavaScriptを使用してクラス名にプレフィックスを追加する方法

答えて

関連する問題