onclickJavaScript を使用して、またはその他のイベントに応答して HTML 要素のクラスを変更するにはどうすればよいですか?
Nathan Smith
質問する
3060318 次
34 に答える
4323
クラスを変更するための最新のHTML5テクニック
最近のブラウザには、ライブラリを必要とせずにクラスを簡単に操作できるようにするメソッドを提供するclassListが追加されています。
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
残念ながら、これらはv10より前のInternet Explorerでは機能しませんが、このページから入手できるIE8およびIE9にサポートを追加するためのシムがあります。しかし、それはますますサポートされるようになっています。
シンプルなクロスブラウザソリューション
要素を選択する標準のJavaScriptの方法はdocument.getElementById("Id")、を使用することです。これは、次の例で使用されます。もちろん、他の方法で要素を取得できます。適切な状況では、this代わりに使用することもできます。ただし、これについて詳しく説明することは範囲を超えています。答えの。
要素のすべてのクラスを変更するには：
既存のすべてのクラスを1つ以上の新しいクラスに置き換えるには、className属性を設定します。
document.getElementById("MyElement").className = "MyClass";
（スペース区切りのリストを使用して、複数のクラスを適用できます。）
要素にクラスを追加するには：
既存の値を削除/影響せずに要素にクラスを追加するには、次のようにスペースと新しいクラス名を追加します。
document.getElementById("MyElement").className += " MyClass";
要素からクラスを削除するには：
他の潜在的なクラスに影響を与えずに、単一のクラスを要素に削除するには、単純な正規表現の置換が必要です。
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
この正規表現の説明は次のとおりです。
(?:^|\s) # Match the start of the string or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be the end of the string or space)
このgフラグは、クラス名が複数回追加された場合に、必要に応じて置換を繰り返すように指示します。
クラスがすでに要素に適用されているかどうかを確認するには：
クラスを削除するために上記で使用したのと同じ正規表現を、特定のクラスが存在するかどうかのチェックとして使用することもできます。
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
###これらのアクションをonclickイベントに割り当てる：
HTMLイベント属性（などonclick="this.className+=' MyClass'"）内にJavaScriptを直接書き込むことは可能ですが、これは推奨されない動作です。特に大規模なアプリケーションでは、HTMLマークアップをJavaScriptインタラクションロジックから分離することで、より保守しやすいコードが実現されます。
これを実現するための最初のステップは、関数を作成し、onclick属性で関数を呼び出すことです。次に例を示します。
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
（スクリプトタグにこのコードを含める必要はありません。これは単に例を簡潔にするためであり、JavaScriptを別のファイルに含める方が適切な場合があります。）
2番目のステップは、たとえばaddEventListenerを使用して、onclickイベントをHTMLからJavaScriptに移動することです。
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
（HTMLの読み込みが完了した後にその関数のコンテンツが実行されるようにwindow.onload部分が必要であることに注意してください。これがないと、JavaScriptコードが呼び出されたときにMyElementが存在しない可能性があり、行が失敗します。）
JavaScriptフレームワークとライブラリ
上記のコードはすべて標準のJavaScriptですが、フレームワークまたはライブラリを使用して一般的なタスクを簡素化し、コードを作成するときに思いもよらないバグやエッジケースを修正することをお勧めします。
クラスを変更するだけで最大50KBのフレームワークを追加するのはやり過ぎだと考える人もいますが、JavaScriptの作業を大量に行っている場合や、ブラウザー間の動作が異常である可能性がある場合は、検討する価値があります。
（非常に大まかに言えば、ライブラリは特定のタスク用に設計されたツールのセットですが、フレームワークには通常、複数のライブラリが含まれ、完全な一連の職務を実行します。）
上記の例は、おそらく最も一般的に使用されているJavaScriptライブラリであるjQueryを使用して以下に再現されています（ただし、調査する価値のあるものもあります）。
（$ここにjQueryオブジェクトがあることに注意してください。）
jQueryでクラスを変更する：
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
さらに、jQueryは、適用されない場合にクラスを追加したり、適用されるクラスを削除したりするためのショートカットを提供します。
$('#MyElement').toggleClass('MyClass');
### jQueryを使用してクリックイベントに関数を割り当てる：
$('#MyElement').click(changeClass);
または、IDを必要とせずに：
$(':button:contains(My Button)').click(changeClass);
于 2008-10-12T20:45:36.347 に答える
461
次のこともできます。
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
クラスを切り替えるには (存在する場合は削除し、そうでない場合は追加します):
document.getElementById('id').classList.toggle('class');
于 2011-08-05T17:44:12.403 に答える
137
jQuery を使用していない古いプロジェクトの 1 つで、要素にクラスがあるかどうかを追加、削除、およびチェックするための次の関数を作成しました。
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!hasClass(ele, cls))
ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
たとえば、onclickボタンにクラスを追加したい場合は、これを使用できます。
<script type="text/javascript">
function changeClass(btn, cls) {
if(!hasClass(btn, cls)) {
addClass(btn, cls);
}
}
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>
今では、jQuery を使用した方がよいことは確かです。
于 2011-05-28T07:32:53.030 に答える
92
あなたはnode.classNameそのように使うことができます：
document.getElementById('foo').className = 'bar';
これは、 PPKに従ってInternetExplorer5.5以降で機能するはずです。
于 2008-10-12T20:33:06.183 に答える
57
うわー、ここにあまりにも多くの過剰な答えがあることに驚いた...
<div class="firstClass" onclick="this.className='secondClass'">
于 2012-01-05T19:14:01.220 に答える
56
純粋な JavaScript コードを使用する:
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
function replaceClass(ele, oldClass, newClass){
if(hasClass(ele, oldClass)){
removeClass(ele, oldClass);
addClass(ele, newClass);
}
return;
}
function toggleClass(ele, cls1, cls2){
if(hasClass(ele, cls1)){
replaceClass(ele, cls1, cls2);
}else if(hasClass(ele, cls2)){
replaceClass(ele, cls2, cls1);
}else{
addClass(ele, cls1);
}
}
于 2011-09-20T15:26:08.343 に答える
38
これは私のために働いています：
function setCSS(eleID) {
var currTabElem = document.getElementById(eleID);
currTabElem.setAttribute("class", "some_class_name");
currTabElem.setAttribute("className", "some_class_name");
}
于 2011-12-08T09:36:57.080 に答える
26
クラスを追加、削除、切り替え、チェックするメソッドを追加するために、HTMLElement オブジェクトを拡張することもできます ( gist ):
HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;
HTMLElement.prototype.addClass = function(string) {
if (!(string instanceof Array)) {
string = string.split(' ');
}
for(var i = 0, len = string.length; i < len; ++i) {
if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
this.className = this.className.trim() + ' ' + string[i];
}
}
}
HTMLElement.prototype.removeClass = function(string) {
if (!(string instanceof Array)) {
string = string.split(' ');
}
for(var i = 0, len = string.length; i < len; ++i) {
this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
}
}
HTMLElement.prototype.toggleClass = function(string) {
if (string) {
if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
} else {
this.className = this.className.trim() + ' ' + string;
}
}
}
HTMLElement.prototype.hasClass = function(string) {
return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}
そして、次のように使用します（クリックすると、クラスが追加または削除されます）：
document.getElementById('yourElementId').onclick = function() {
this.toggleClass('active');
}
これがデモです。
于 2013-04-11T10:13:36.747 に答える
23
別の一般的なフレームワークである Google Closures からの情報を追加するには、それらのdom/classesクラスを参照してください。
goog.dom.classes.add(element, var_args)
goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)
goog.dom.classes.remove(element, var_args)
要素を選択するための 1 つのオプションは、CSS 3 セレクターでgoog.dom.queryを使用することです。
var myElement = goog.dom.query("#MyElement")[0];
于 2011-11-26T21:04:12.050 に答える
20
以前の正規表現に関するいくつかのマイナーなメモと微調整:
クラスリストにクラス名が複数回含まれている場合は、グローバルに実行する必要があります。また、クラス リストの末尾からスペースを削除し、複数のスペースを 1 つのスペースに変換して、スペースが連続しないようにすることをお勧めします。クラス名を扱う唯一のコードが以下の正規表現を使用し、名前を追加する前に名前を削除する場合、これらのことは問題になりません。しかし。さて、誰がクラス名リストをいじっているのか誰にもわかりません。
この正規表現は大文字と小文字を区別しないため、クラス名の大文字と小文字を区別しないブラウザーでコードが使用される前に、クラス名のバグが表示される可能性があります。
var s = "testing one four one two";
var cls = "one";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
于 2012-05-02T04:59:17.043 に答える
19
ASP.NETで JavaScript を使用して要素の CSS クラスを変更します。
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
End If
End Sub
于 2011-05-28T07:19:25.137 に答える
17
jQuery を使用して、次のように記述します。
jQuery(function($) {
$("#some-element").click(function() {
$(this).toggleClass("clicked");
});
});
このコードは、id some-element の要素がクリックされたときに呼び出される関数を追加します。この関数は、要素の class 属性にclickedが含まれていない場合は追加し、含まれている場合は削除します。
はい、このコードを使用するには、ページに jQuery ライブラリへの参照を追加する必要がありますが、少なくとも、ライブラリ内のほとんどの関数がほぼすべての最新のブラウザーで動作し、時間を節約できると確信できます。独自のコードを実装して同じことを行います。
于 2012-05-05T02:46:22.807 に答える
16
この線
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
次のようにする必要があります。
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
于 2009-12-08T22:15:12.453 に答える
15
Internet Explorer 6 をサポートするバニラ JavaScript で要素のクラスを変更する
nodeattributesプロパティを使用して、古いブラウザー (Internet Explorer 6 も含む) との互換性を維持することができます。
function getClassNode(element) {
for (var i = element.attributes.length; i--;)
if (element.attributes[i].nodeName === 'class')
return element.attributes[i];
}
function removeClass(classNode, className) {
var index, classList = classNode.value.split(' ');
if ((index = classList.indexOf(className)) > -1) {
classList.splice(index, 1);
classNode.value = classList.join(' ');
}
}
function hasClass(classNode, className) {
return classNode.value.indexOf(className) > -1;
}
function addClass(classNode, className) {
if (!hasClass(classNode, className))
classNode.value += ' ' + className;
}
document.getElementById('message').addEventListener('click', function() {
var classNode = getClassNode(this);
var className = hasClass(classNode, 'red') && 'blue' || 'red';
removeClass(classNode, 'red');
removeClass(classNode, 'blue');
addClass(classNode, className);
}).red {
color: red;
}
.red:before {
content: 'I am red! ';
}
.red:after {
content: ' again';
}
.blue {
color: blue;
}
.blue:before {
content: 'I am blue! '
}<span id="message" class="">Click me</span>于 2015-11-04T17:57:07.750 に答える
12
これが私のバージョンで、完全に機能しています：
function addHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
obj.className += " " + classname
}
function removeHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
var classes = ""+obj.className
while (classes.indexOf(classname)>-1) {
classes = classes.replace (classname, "")
}
obj.className = classes
}
使用法：
<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
于 2012-10-17T12:21:20.180 に答える
3
classListドム API:
クラスを追加および削除する非常に便利な方法は、classListDOM API です。この API を使用すると、JavaScript を使用してリストを変更するために、特定の DOM 要素のすべてのクラスを選択できます。例えば：
const el = document.getElementById("main");
console.log(el.classList);<div class="content wrapper animated" id="main"></div>要素のクラスだけでなく、多くの補助メソッドとプロパティを含むオブジェクトを取得していることをログで確認できます。このオブジェクトは、スペースで区切られた一連のトークン (クラスなど) を表すために DOM で使用されるインターフェイスであるDOMTokenListインターフェイスから継承します。
例：
const el = document.getElementById('container');
function addClass () {
el.classList.add('newclass');
}
function replaceClass () {
el.classList.replace('foo', 'newFoo');
}
function removeClass () {
el.classList.remove('bar');
}button{
margin: 20px;
}
.foo{
color: red;
}
.newFoo {
color: blue;
}
.bar{
background-color: powderblue;
}
.newclass{
border: 2px solid green;
}<div class="foo bar" id="container">
"Sed ut perspiciatis unde omnis
iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas
</div>
<button onclick="addClass()">AddClass</button>
<button onclick="replaceClass()">ReplaceClass</button>
<button onclick="removeClass()">removeClass</button>于 2018-09-21T09:23:12.163 に答える
2
これを入れようと思っただけです：
function inArray(val, ary){
for(var i=0,l=ary.length; i<l; i++){
if(ary[i] === val){
return true;
}
}
return false;
}
function removeClassName(classNameS, fromElement){
var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
for(var i=0,l=s.length; i<l; i++){
if(!iA(s[i], x))r.push(s[i]);
}
fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
var s = toElement.className.split(/\s/);
s.push(c); toElement.className = s.join(' ');
}
于 2015-03-20T02:35:01.757 に答える
-27
これは、jQuery のようなライブラリを使用すると最も簡単です。
<input type="button" onClick="javascript:test_byid();" value="id='second'" />
<script>
function test_byid()
{
$("#second").toggleClass("highlight");
}
</script>
于 2008-10-12T20:12:16.787 に答える
-69
No offense, but it's unclever to change class on-the-fly as it forces the CSS interpreter to recalculate the visual presentation of the entire web page.
The reason is that it is nearly impossible for the CSS interpreter to know if any inheritance or cascading could be changed, so the short answer is:
Never ever change className on-the-fly !-)
But usually you'll only need to change a property or two, and that is easily implemented:
function highlight(elm){
elm.style.backgroundColor ="#345";
elm.style.color = "#fff";
}
于 2008-10-12T20:16:33.817 に答える