私はすでにクラスを持つ要素を持っています:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
ここで、クラスをに追加する JavaScript 関数を作成したいと考えていますdiv(置換ではなく追加)。
どうやってやるの？
2012034 次
27 に答える
2361
最新のブラウザーのみをターゲットにしている場合:
クラスを追加するには、element.classList.addを使用します。
element.classList.add("my-class");
クラスを削除するには、element.classList.removeを使用します。
element.classList.remove("my-class");
Internet Explorer 9 以前をサポートする必要がある場合:
classNameスペースと新しいクラスの名前を要素のプロパティに追加します。まず、id参照を簡単に取得できるように、要素に を配置します。
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
それで
var d = document.getElementById("div1");
d.className += " otherclass";
の前のスペースに注意してくださいotherclass。スペースを含めることが重要です。そうしないと、クラス リストでその前にある既存のクラスが損なわれます。
MDN の element.classNameも参照してください。
于 2009-02-03T13:58:01.480 に答える
1391
フレームワークなしでこれを行う最も簡単な方法は、element.classList.addメソッドを使用することです。
var element = document.getElementById("div1");
element.classList.add("otherclass");
編集: そして、要素からクラスを削除したい場合-
element.classList.remove("otherclass");
空のスペースを追加したり、自分でエントリ処理を複製したりする必要がないことを好みます (これは、このdocument.classNameアプローチを使用するときに必要です)。ブラウザにはいくつかの制限がありますが、ポリフィルを使用して回避できます。
于 2012-12-31T12:12:22.263 に答える
185
必要に応じてターゲット要素「d」を見つけてから、次のようにします。
d.className += ' additionalClass'; //note the space
それをより賢い方法でラップして、既存のものをチェックしたり、スペース要件をチェックしたりできます..
于 2009-02-03T14:01:20.130 に答える
143
クラスを追加
クロスコンパチブル
classname次の例では、要素に a を追加し<body>ます。これは IE-8 互換です。var a = document.body; a.classList ? a.classList.add('classname') : a.className += ' classname';これは、次の省略形です。
var a = document.body; if (a.classList) { a.classList.add('wait'); } else { a.className += ' wait'; }
パフォーマンス
相互互換性よりもパフォーマンスに関心がある場合は、次のように短縮できます。これは 4% 高速です。
var z = document.body; document.body.classList.add('wait');
快適
別の方法として jQuery を使用することもできますが、結果のパフォーマンスは大幅に低下します。jsPerf によると 94% 遅い
$('body').addClass('wait');
クラスの削除
パフォーマンス
パフォーマンスが気になる場合は、jQuery を選択的に使用してクラスを削除するのが最善の方法です。
var a = document.body, c = ' classname'; $(a).removeClass(c);
jQuery がないと 32% 遅くなります
var a = document.body, c = ' classname'; a.className = a.className.replace( c, '' ); a.className = a.className + c;
参考文献
プロトタイプの使用
Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")
ゆいを使う
YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")
于 2014-12-22T23:29:37.120 に答える
25
私が行っている作業でライブラリを使用する必要がない場合は、次の 2 つの関数を使用します。
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}
于 2009-02-03T14:40:44.373 に答える
23
この 1 つのクラスを追加するだけでなく、それ以上のことを行っていると仮定すると (たとえば、非同期リクエストなども同様に実行されている場合)、PrototypeやjQueryなどのライブラリをお勧めします。
これにより、(これを含め) 必要なすべての作業が非常に簡単になります。
ページに jQuery があるとします。次のようなコードを使用して、要素にクラス名を追加できます (この場合はロード時)。
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
他のものについては、 jQuery API ブラウザをチェックしてください。
于 2009-02-03T14:00:25.110 に答える
18
classList.add または classList.remove メソッドを使用して、要素からクラスを追加/削除できます。
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")
上記のコードは、クラス「anyclass」を nameElem に追加します (置き換えはしません)。同様に、classList.remove() メソッドを使用してクラスを削除できます。
nameElem.classList.remove("anyclss")
于 2013-08-10T08:59:34.110 に答える
13
要素にクラスを追加するには:
既存の値を削除/影響を与えずに要素にクラスを追加するには、次のようにスペースと新しいクラス名を追加します。
document.getElementById("MyElement").className += " MyClass";
要素のすべてのクラスを変更するには:
既存のすべてのクラスを 1 つ以上の新しいクラスに置き換えるには、className 属性を設定します。
document.getElementById("MyElement").className = "MyClass";
(スペースで区切られたリストを使用して、複数のクラスを適用できます。)
于 2015-08-20T08:38:22.067 に答える
8
jQuery を使用せず、古いブラウザーをサポートしたい場合:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
于 2016-03-31T23:29:30.830 に答える
7
簡単な方法で要素クラスを追加、削除、またはチェックするには:
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');
于 2014-06-11T08:11:00.757 に答える
6
IE9が正式にシャットダウンされたことは知っていますが、上記のように多くのことを達成できますが、上記の多くの回答の助けを借りelement.classListずにそれがどのように機能するかを学ぼうとしました。classList
以下のコードは、上記の多くの回答を拡張し、重複するクラスを追加しないようにすることでそれらを改善します。
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');
于 2016-12-18T17:30:21.470 に答える
5
ブラウザーの DOM で実行できる純粋な JavaScript を使用する方がよいと思います。
機能的な使い方はこちら。私は ES6 を使用しましたが、ES5 と関数式または関数定義のうち、JavaScript スタイルガイドに適したものを自由に使用してください。
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}于 2016-11-28T00:41:39.140 に答える
5
他の人が言ったことを詳しく説明すると、複数の CSS クラスが、スペースで区切られた 1 つの文字列に結合されます。したがって、ハードコードしたい場合は、次のようになります。
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
そこから、新しいクラスを追加するために必要な JavaScript を簡単に派生させることができます。要素の className プロパティにスペースを追加し、その後に新しいクラスを追加するだけです。これを知っていれば、後で必要に応じてクラスを削除する関数を作成することもできます。
于 2009-02-03T14:18:50.423 に答える
3
純粋な JS を使用したサンプル。最初の例では、要素の ID を取得し、たとえば 2 つのクラスを追加します。
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})
2 番目の例では、要素のクラス名を取得し、さらに 1 つ追加します。
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})
于 2015-07-19T16:31:23.180 に答える
2
最短
image1.parentNode.className+=' box';
image1.parentNode.className+=' box';.box { width: 100px; height:100px; background: red; }<div class="someclass">
<img ... id="image1" name="image1" />
</div>于 2020-05-14T11:20:16.443 に答える
1
API querySelector を使用して要素を選択し、要素と新しいクラス名をパラメーターとして使用して関数を作成できます。最新のブラウザーでは classlist を使用し、そうでない場合は IE8 を使用します。その後、イベントの後に関数を呼び出すことができます。
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');
于 2015-03-06T10:27:52.930 に答える
0
まず、div に id を与えます。次に、関数 appendClass を呼び出します。
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>
于 2009-02-03T14:04:58.253 に答える
-4
このjsコードは私のために働きます
クラス名の置換を提供
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name
使用するだけで追加するには
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name
使用を削除するには
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name
これが誰かに役立つことを願っています
于 2014-06-27T14:48:21.130 に答える
-9
于 2009-02-03T14:11:58.597 に答える