Javascript istifadə element sinifini necə dəyişdirmək olar?

JavaScript istifadə edərək, onClick hadisəsinə cavab olaraq HTML elementinin sinifini necə dəyişə bilərəm?

2398
12 окт. Nathan Smith tərəfindən 12 oktyabrda təyin olundu 2008-10-12 23:06 '08 at 11:06 pm 2008-10-12 23:06
ответ 31 cavab
  • 1
  • 2

Dərsləri dəyişmək üçün müasir HTML5 üsulları

Müasir brauzerlər kitabxana ehtiyacına ehtiyac olmadan sinif manipulyasiyasını asanlaşdıran üsulları təmin edən sinif siyahısı əlavə etdi:

 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'); 

Təəssüf ki, onlar Internet Explorer-da v10-a qədər işləmirlər, baxmayaraq ki, bu səhifədə mövcud olan IE8 və IE9-da dəstək üçün bir pad var. Bununla birlikdə, getdikcə dəstəklənir .

Sadə çapraz browser həll

Bir element seçmək üçün standart JavaScript üsulu aşağıdakı nümunələrdə istifadə olunan document.getElementById("Id") istifadə edir: əlbəttə, elementləri fərqli şəkildə əldə edə bilərsiniz və düzgün vəziyyətdə, cavab əhatəsindən kənarda.

Bir element üçün bütün sinifləri dəyişdirmək üçün:

Bütün mövcud sinifləri bir və ya daha çox yeni siniflər ilə əvəz etmək üçün className xüsusiyyətini təyin edin:

 document.getElementById("MyElement").className = "MyClass"; 

(Birdən çox sinif tətbiq etmək üçün bir yer ayrılmış siyahıdan istifadə edə bilərsiniz.)

Bir elementə əlavə sinif əlavə etmək üçün:

Mövcud dəyərləri silmədən / təsir etmədən elementə bir sinif əlavə etmək üçün məsələn, bir boşluq və yeni bir sinif adı əlavə edin:

 document.getElementById("MyElement").className += " MyClass"; 

Bir elementdən bir element çıxarmaq üçün:

Digər potensial siniflərə təsir etmədən element üçün bir sinfi aradan qaldırmaq üçün sadə bir müntəzəm ifadə dəyişdirilməsi tələb olunur:

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/g , '' )  

Bu müntəzəm ifadə üçün izahat belədir:

 (?:^|\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 # (ie must be end of string or a space) 

g bayrağı, sinif adı bir neçə dəfə əlavə edildikdə, dəyişdirmənin zəruri olduğu təqdirdə təkrar edildiyini göstərir.

Bir elementin bir elementə tətbiq olunduğunu yoxlamaq üçün:

Bir sinfi aradan qaldırmaq üçün yuxarıda istifadə olunan eyni müntəzəm ifadə ayrıca xüsusi bir sinif mövcud olub olmadığını görmək üçün bir çek kimi istifadə edilə bilər:

 if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) ) 


Hadisələri onclick hadisələrə təyin etmək:

HTML hadisəsi xüsusiyyətləri daxilində doğrudan JavaScript yaza bilərsiniz (məsələn, onclick="this.className+=' MyClass'" ), bu davranış tövsiyə edilmir. Böyük tətbiqlərdə, daha rahat kod, HTML formatlaşdırma işarəsini JavaScript işarəsi məntiqinə bölməklə əldə edilir.

Buna nail olmaq üçün ilk addım bir funksiya yaratmaq və onclick xüsusiyyətində funksiyanı çağırmaqdır, məsələn:

 <script type="text/javascript"> function changeClass(){ // Code examples from above } </script> ... <button onclick="changeClass()">My Button</button> 

(Bu kodun skript yazıları içində olması lazım deyil, bu yalnız nümunə üçündir və JavaScript daxil olmaqla ayrıca faylda daha uyğun ola bilər.)

İkinci addım, onclick hadisəsini HTML və JavaScriptdən, məsələn, addEventListener istifadə etməkdir

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

(Qeyd edək ki, window.onload hissəsi tələb olunur ki, bu funksiyanın məzmunu HTML yüklənmə başa çatdıqdan sonra yerinə yetirilir - bu olmadan, MyElement simli uğursuz olmadığı üçün JavaScript kodunu çağırarkən mövcud olmaya bilər.)


JavaScript strukturları və kitabxanalar

Yuxarıdakı kod standart JavaScript-dir, amma ümumi təcrübə ümumi tapşırıqları asanlaşdırmaq üçün bir infrastrukturdan və ya kitabxanadan, eləcə də kod yazarkən fikirləşməmiş ola biləcək düzəldilmiş səhvlərdən və həddindən artıq vəziyyətdən istifadə etməkdir.

Bəzi insanlar sadə bir sinif dəyişikliyi üçün 50KB ətraf mühitini əlavə etmək lazımsız olduğunu düşünsələr də, əhəmiyyətli bir JavaScript işi və ya qeyri-adi cross-brauzer davranışı ola bilər bir şey varsa, nəzərə dəyər.

(Çox kabaca, kitabxana xüsusi bir tapşırıq üçün nəzərdə tutulmuş bir vasitədir, struktur isə bir neçə kitabxananı ehtiva edir və tam məsuliyyət daşıyır.)

Yuxarıdakı nümunələr jQuery istifadə edərək, aşağıda, bəlkə də ən çox istifadə edilən JavaScript kitabxanasından istifadə edilmişdir (başqaları kəşf etməyə dəyərdir).

(Qeyd edək ki, $ burada jQuery obyektidir.)

JQuery istifadə edərək siniflərin dəyişdirilməsi:

 $('#MyElement').addClass('MyClass'); $('#MyElement').removeClass('MyClass'); if ( $('#MyElement').hasClass('MyClass') ) 

Bundan əlavə, jQuery tətbiqi tətbiq edilmədikdə sinif əlavə etmək və ya bir sinfi silmək üçün bir qısa yol təqdim edir:

 $('#MyElement').toggleClass('MyClass'); 


JQuery istifadə edərək bir tıklama hadisə funksiyası təyin:

 $('#MyElement').click(changeClass); 

və ya identifikator tələb etmədən:

 $(':button:contains(My Button)').click(changeClass); 


3438
12 окт. Peter Boughton tərəfindən verilmiş cavab 12 oktyabr 2008-10-12 23:45 '08 at 11:45 pm 2008-10-12 23:45

Siz də edə bilərsiniz:

 document.getElementById ('id'). classList.add ('sinif'); document.getElementById ('id'). classList.remove ('sinif');
border=0

Və sinfi keçmək üçün (hələ də əlavə etmək üçün silin):

 document.getElementById ('id'). classList.toggle ('sinif');
391
05 авг. Cavab Tyilo 05 avqustda verildi . 2011-08-05 20:44 '11 saat 20:44 'də 2011-08-05 20:44

JQuery istifadə etməyən köhnə layihələrimdən birində maddə bir sinif varsa, əlavə etmək, silmək və yoxlamaq üçün aşağıdakı funksiyaları yaratdım:

 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, ' '); } } 

Beləliklə, məsələn, bir neçə sinif əlavə etmək üçün onclick istəyirsinizsə, bu düyməni istifadə edə bilərsiniz:

 <script type="text/javascript"> function changeClass(btn, cls) { if(!hasClass(btn, cls)) { addClass(btn, cls); } } </script> ... <button onclick="changeClass(this, "someClass")">My Button</button> 

İndi əmin olmaq üçün jQuery istifadə etmək daha yaxşı olardı.

104
28 мая '11 в 10:32 2011-05-28 10:32 cavab 28 may 2011- ci il tarixində, saat 10:32 da, Andrew Orsich tərəfindən verilmişdir. 2011-05-28 10:32

Siz belə node.className istifadə edə bilərsiniz:

 document.getElementById('foo').className = 'bar'; 

Bu, PPK uyğun olaraq 5.5 və daha yüksək səviyyədə işləməlidir.

68
12 окт. Eric Wendelin tərəfindən 12 oktyabrda cevap verildi 2008-10-12 23:33 '08 at 11:33 2008-10-12 23:33

Vay, çaşdı, çox daşqın cavabları var ...

 <div class="firstClass" onclick="this.className='secondClass'"> 
45
05 янв. Travis J tərəfindən verilmiş cavab 05 Jan 2012-01-05 22:14 '12 at 10:14 pm 2012-01-05 22:14

Təmiz javascript kodunu istifadə edin:

 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); } } 
43
20 сент. Cavab PseudoNinja 20 sep tərəfindən verilir . 2011-09-20 18:26 '11 saat 18:26 'də 2011-09-20 18:26

Mənim üçün çalışır:

 function setCSS(eleID) { var currTabElem = document.getElementById(eleID); currTabElem.setAttribute("class", "some_class_name"); currTabElem.setAttribute("className", "some_class_name"); } 
30
08 дек. Cavab Gopal Krishna Ranjan 08 dekabr tərəfindən verilir . 2011-12-08 12:36 '11 at 12:36 PM 2011-12-08 12:36

Ayrıca, HTMLElement obyektini əlavə etmək, silmək, keçid və sinifləri test etmək üçün üsullar əlavə etmək üçün genişləndirə bilərsiniz:

 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); } 

Və sonra yalnız bunu istifadə edin (bir sinif əlavə etmək və ya çıxarmaq üçün basın):

 document.getElementById('yourElementId').onclick = function() { this.toggleClass('active'); } 

İşdə bir nümayiş .

17
11 апр. Cavab moka 11 apr verilir . 2013-04-11 13:13 '13 at 13:13 2013-04-11 13:13

Başqa bir məşhur strukturdan məlumat əlavə etmək üçün, Google Closures, dom / siniflər sinifinə baxın:

 goog.dom.classes.add(element, var_args) goog.dom.classes.addRemove(element, classesToRemove, classesToAdd) goog.dom.classes.remove(element, var_args) 

Element seçilməsi variantlarından biri CSS3 seçicisi ilə goog.dom.querydir :

 var myElement = goog.dom.query("#MyElement")[0]; 
15
27 нояб. Cavab Ben Flynn tərəfindən verilir . 2011-11-27 00:04 '11 'də 0:04, 2011-11-27 00:04

Əvvəlki normal ifadələrdə bir neçə kiçik qeyd və parametrlər:

Dərslər siyahısı bir dəfə daha bir sinif adı varsa, bunu külək etmək istəyirsən. Yəqin ki, boşluqları siniflər siyahısından bitərdən çıxarmaq və boşluqların qarşısını almaq üçün bir neçə boşluqları bir yerə çevirmək istəyirsən. Sınıf adlarıyla eşleşen bir kod aşağıda sıralanan ifadeyi istifadə edir və adı əlavə etməzdən əvvəl aradan qaldırırsa bu problemlərin heç bir problemi olmamalıdır. Lakin Kim bilir, kimin adını sinif adları ilə əlaqələndirə bilər.

Bu müntəzəm ifadə ifadəsi həssasdır, belə ki, sinif adları üzərində işləməyən bir brauzerdə kodu istifadə edilməzdən əvvəl sinif adlarında səhvlər göstərilə bilər.

 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, ' ') + "]"); 
13
02 мая '12 в 7:59 2012-05-02 07:59 Cavab Alex Robinson tərəfindən mayın 02-də saat 12: 59-da verilir. 2012-05-02 07:59

ASP.NET-də JavaScript istifadə edərək CSS class sinifini dəyişdirin:

 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 
12
28 мая '11 в 10:19 2011-05-28 10:19 Cavab 28 may 2011-ci il saat 10:19 da Hiren Kansara tərəfindən verilmişdir 2011-05-28 10:19

Mən jQuery istifadə və bu kimi bir şey yazmaq:

 jQuery(function($) { $("#some-element").click(function() { $(this).toggleClass("clicked"); }); }); 

Bu kod, id elementi bir element kimi adlanırsa çağırılan funksiyanı əlavə edir. Bu funksiya artıq bir hissəsi olmadıqda elementin sinif xüsusiyyətinə bir klik əlavə edir və əgər varsa onu silə bilər.

Bəli, bu kodu istifadə etmək üçün səhifənizdə jQuery kitabxanasına bir keçid əlavə etməlisiniz, lakin ən azı kitabxanada olan funksiyaların əksəriyyəti demək olar ki, bütün müasir brauzerlərdə işləyəcək və bu, öz kodunuzu həyata keçirmək üçün sizə vaxt qazandıracağından əmin ola bilərsiniz. Eyni şeyi etmək.

Təşəkkür edirik

11
05 мая '12 в 5:46 2012-05-05 05:46 cavab şinqokko verildi 05 May '12 at 5:46 2012-05-05 05:46

Line

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','') 

olmalıdır:

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/',''); 
9
09 дек. Eric Bailey tərəfindən verilmiş cavab 09 Dek 2009-12-09 01:15 '09 saat 01:15 'da 2009-12-09 01:15

İşdə mənim versiyam, tam funksionaldır:

 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 } 

İstifadə edin:

 <tr onmouseover='addHTMLClass(this,"clsSelected")' onmouseout='removeHTMLClass(this,"clsSelected")' > 
7
17 окт. Cavab 17 oktyabrda alfred verilir . 2012-10-17 15:21 '12 saat 15:21 'da 2012-10-17 15:21

Aşağıda toggleClass element üçün keçid / əlavə edin / aradan qaldırın:

 // If newState is provided add/remove theClass accordingly, otherwise toggle theClass function toggleClass(elem, theClass, newState) { var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g'); var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null)); elem.className=elem.className.replace(matchRegExp, ''); // clear all if (add) elem.className += ' ' + theClass; } 

jsfiddle bax

Dinamik olaraq yeni bir sinif yaratmaq üçün burada cavabımı da görürəm

7
28 окт. kofifus tərəfindən verilən cavabı Oct 28. 2015-10-28 10:00 '15 saat 10:00 'da, 2015-10-28 10:00' də

Vanilla javascript element elementini IE6 dəstəyi ilə dəyişdirin

IE6 da köhnə brauzerlər ilə uyğunluğun qorunması üçün node attributes istifadə edə bilərsiniz:

 .red { color: red; } .red:before { content: 'I am red! '; } .red:after { content: ' again'; } .blue { color: blue; } .blue:before { content: 'I am blue! ' } 
6
04 нояб. Cavab Eugene Tiurin tərəfindən 04 Noyabr. 2015-11-04 20:57 '15 at 20:57 2015-11-04 20:57

Kodumda aşağıdakı vanil javascript funksiyalarından istifadə edirəm. Onlar normal ifadələr və indexOf istifadə lakin normal ifadələrdə xüsusi simvol indexOf tələb etmir.

 function addClass(el, cn) { var c0 = (" " + el.className + " ").replace(/\s+/g, " "), c1 = (" " + cn + " ").replace(/\s+/g, " "); if (c0.indexOf(c1) < 0) { el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, ""); } } function delClass(el, cn) { var c0 = (" " + el.className + " ").replace(/\s+/g, " "), c1 = (" " + cn + " ").replace(/\s+/g, " "); if (c0.indexOf(c1) >= 0) { el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, ""); } } 

Siz həmçinin element.classList'i müasir brauzerlərdə də istifadə edə bilərsiniz.

5
18 янв. Cavab 18 yanvarda Salman A tərəfindən verilir . 2014-01-18 12:28 '14 da 12:28 2014-01-18 12:28

Bunu etmək mümkündür.

HTML:

 <div class="red" id="text"> <a href="#" onclick="changeClass();">Fahad</a> </div> 

CSS

 .red a{ color:red; } .black a{ color:black; } 

Javascript:

 function changeClass(){ document.getElementById("text").className = "black"; } 

Feeddle

4
03 июля '16 в 17:04 2016-07-03 17:04 Cavab Fahad Uddin tərəfindən 03 iyul '17' də saat 17:04 'də veriləcək 2016-07-03 17:04

Bir sinfi silmək istəyirsinizsə, bunu edə bilərsiniz:

 ELEMENT.classList.remove("CLASS_NAME"); 

Bir sinif əlavə etmək üçün:

 ELEMENT.classList.add('CLASS_NAME'); 
3
14 нояб. cavab ferralucho 14 noyabr. 2017-11-14 03:18 '17 də 3:18 'də 2017-11-14 03:18' də

Buradan : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Bir düyməni basarkən, cəhd edə bilərsiniz:

əvəz (oldClass, newClass)
Mövcud bir sinfi yeni bir siniflə əvəz edir.

Məsələn:

 var myDiv = document.getElementById('myElement'); myDiv.classList.contains('myCssClass'); myDiv.classList.replace("myCssClass", "myCssClass_new"); 
1
27 нояб. Cavab verilir 27 Kasım Kurkula. 2017-11-27 22:06 '17 saat 10:06 'da 2017-11-27 22:06

Uzun bir axtarışdan sonra, document.getElementById () olmadan sinif idarə olunması üçün ən yaxşı həll tapdım

 var els = [].slice.apply(document.getElementsByClassName("no-js")); for (var i = 0; i < els.length; i++) { els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js"); } 

Başlanğıc nöqtəsi: on123.ru.site/questions/2069 / ...

1
10 дек. cavab verildi eapo 10 dec. 2016-12-10 02:19 '16 at 2:19 2016-12-10 02:19

Faydalı tapdığım yaxşıdır.

 function classChangeFn() { document.getElementById("MyElement").className = ""; } window.onload = function(){ document.getElementById("MyElement").addEventListener( 'click' , classChangeFn ); } 
1
11 апр. Məhəmməd Cavedin aprelin 11-də verdiyi cavabı 2016-04-11 14:59 '16 saat 2:59 'da 2016-04-11 14:59

API classList DOM:

Dərsləri əlavə etmək və silmək üçün çox əlverişli bir yoldur DOM API classList . Bu API, javascript istifadə edərək siyahısı dəyişmək üçün müəyyən bir DOM elementinin bütün siniflərini seçməyə imkan verir. Məsələn:

 <div class="content wrapper animated" id="main"></div> 

Jurnalda biz elə element dərsləri ilə deyil, bir çox köməkçi üsul və xüsusiyyətlərlə də bir obyekt əldə etdiyimizi müşahidə edə bilərik. Bu obyekt DOMTokenList interfeysindən, məsələn, boşluqlar (məsələn, siniflər) ilə ayrılmış bir sıra simvolları təmsil etmək üçün DOM-da istifadə olunan bir interfeysdən irəli gəlir.

Məsələn:

 button{ margin: 20px; } .foo{ color: red; } .newFoo { color: blue; } .bar{ background-color:powderblue; } .newclass{ border: 2px solid green; } 

Tamam, məncə bu halda jQuery-dən istifadə etməli və ya özəl javascriptdə öz üsullarınızı yazmalısan, amma digər səbəblərə ehtiyacım yoxdursa mənim jQuery-ni daxil etməkdən başqa, öz üsullarımı əlavə etməyi üstün tuturam.

Mən javascript infrastruktumun metodları kimi bir şey etmək istəyirəm, jQuery kimi dərsləri əlavə etmək, siniflərin silinməsi və s. Kimi funksiyaları əlavə etmək üçün, bu da IE9 + da tam dəstəklənir, mənim kodu yazılmışdır ES6 haqqında brauzerinizin onu dəstəklədiyinə və ya babel kimi bir şey istifadə etdiyinizə əmin olmalısınız, əksinə kodunuzda ES5 sözdizimini istifadə etməliyik, bu şəkildə eyni elementdən elementi tapırıq, yəni element seçilməlidir identifikator

 //simple javascript utils for class management in ES6 var classUtil = { addClass: (id, cl) => { document.getElementById(id).classList.add(cl); }, removeClass: (id, cl) => { document.getElementById(id).classList.remove(cl); }, hasClass: (id, cl) => { return document.getElementById(id).classList.contains(cl); }, toggleClass: (id, cl) => { document.getElementById(id).classList.toggle(cl); } } 

və sadəcə, aşağıda göstərildiyi kimi, onları istifadə edərək, zəng edə bilərsiniz. Elementinizin bir id və sinif olduğunu təsəvvür edin, onları simli olaraq keçirməyinizə əmin olun, aşağıda göstərildiyi kimi istifadə edə bilərsiniz:

 classUtil.addClass('myId', 'myClass'); classUtil.removeClass('myId', 'myClass'); classUtil.hasClass('myId', 'myClass'); classUtil.toggleClass('myId', 'myClass'); 
0
29 мая '17 в 16:29 2017-05-29 16:29 Cavab Alireza tərəfindən 29 May '17, 16:29 2017-05-29 16:29 'də verilir

Düşündüm ki, atmağı düşünürəm:

 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(' '); } 
0
20 марта '15 в 5:35 2015-03-20 05:35 Cavab PHPglue tərəfindən 20 Mart 'da 5:35' də verilir 2015-03-20 05:35

yalnız myElement.classList="new-class" deyirsinizsə, başqa mövcud sinifləri dəstəkləmək lazım deyilsə, bu halda classList.add, .remove üsullarını istifadə edə bilərsiniz.

 div{ min-height:48px; min-width:48px; } .bordered{ border: 1px solid black; } .green{ background:green; } .blue{ background: blue; } 

Bir html elementi olan bir düyməni nəzərdən keçirin. Sinifin düyməni1 qaldırılmasına icazə verilsin və əlavə olunan sinif düyməsinə2, id isə düyməsidir.

 <button id="button" class="button1" onclick="ClassChange()"> 
0
20 февр. cavab 20 fevralda user8158111 tərəfindən verilir. 2018-02-20 20:09 '18 at 8:09 pm 2018-02-20 20:09

JavaScript iş kodu:

 <div id="div_add" class="div_add">Add class from Javascript</div> <div id="div_replace" class="div_replace">Replace class from Javascript</div> <div id="div_remove" class="div_remove">Remove class from Javascript</div> <button onClick="div_add_class();">Add class from Javascript</button> <button onClick="div_replace_class();">Replace class from Javascript</button> <button onClick="div_remove_class();">Remove class from Javascript</button> <script type="text/javascript"> function div_add_class() { document.getElementById("div_add").className += " div_added"; } function div_replace_class() { document.getElementById("div_replace").className = "div_replaced"; } function div_remove_class() { document.getElementById("div_remove").className = ""; } </script> 

Bu linki iş kodunu yükləyə bilərsiniz.

-1
05 янв. Sajid cavab 05 yanvar 2016-01-05 21:49 '16 saat 21:49 2016-01-05 21:49

Bunun üçün sadə jQuery kodu.

 $(".class1").click(function(argument) { $(".parentclass").removeClass("classtoremove"); setTimeout(function (argument) { $(".parentclass").addClass("classtoadd"); }, 100); }); 

Burada

  • Class1 hadisə üçün dinləyicidir.
  • Ana sinif dəyişdirmək istədiyiniz sinifə ev sahibliyi edən sinifdir.
  • Classtoremove sizin yaşadığınız köhnə sinifdir.
  • Əlavə etmək istədiyiniz sinif əlavə etmək istədiyiniz yeni bir sinifdir.
  • 100 sinif dəyişikliyi zamanı gözləmə müddəti.

Uğurlar.

-3
06 апр. Cavab verilib uttamcafedeweb 06 Aprel. 2014-04-06 09:10 '14 at 9:10 2014-04-06 09:10

Bu jQuery kitabxanası ilə asan:

 <input type="button" onClick="javascript:test_byid();" value="id='second'" /> <script> function test_byid() { $("#second").toggleClass("highlight"); } </script> 
-18
12 окт. Jon Galloway 12 oktyabrına cavab verin 2008-10-12 23:12 '08 at 11:12 2008-10-12 23:12
  • 1
  • 2