Kaip pakeisti elementų klasę naudojant „JavaScript“?

Kaip pakeisti HTML elemento klasę atsakant į onClick įvykį naudojant „JavaScript“?

2435
12 окт. Nathan Smith nustatė spalio 12 d 2008-10-12 23:06 '08, 11:06 val. 2008-10-12 23:06
@ 32 atsakymai
  • 1
  • 2

Modernūs HTML5 metodai klasėms keisti

Šiuolaikinės naršyklės pridėjo classList, kuri suteikia metodus, kurie palengvina klasės manipuliavimą be bibliotekos poreikio:

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

Deja, jie neveikia „Internet Explorer“ naršyklėje, kol nėra v10, nors yra ir padas, kad būtų galima ją palaikyti šiame puslapyje esančiame IE8 ir IE9. Tačiau tai vis labiau remiama .

Paprastas tarpinio naršyklės sprendimas

Standartinis „JavaScript“ metodas, skirtas elementui pasirinkti, naudoja „ document.getElementById("Id") , kuris naudojamas šiuose pavyzdžiuose: jūs, žinoma, galite gauti elementų kitaip, o teisingoje situacijoje galite paprasčiausiai naudoti this elementą, o ne išsamiau, už atsakymo ribų.

Jei norite pakeisti visas elemento klases:

Jei norite pakeisti visas esamas klases viena ar daugiau naujų klasių, nustatykite atributą „ClassName“:

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

(Jei norite taikyti kelias klases, galite naudoti suskirstytą tarpą.)

Norėdami pridėti papildomą klasę elementui:

Jei norite pridėti klasę prie elemento neištrindami / nepaveikdami esamų vertybių, pridėkite tarpą ir naują klasės pavadinimą, pavyzdžiui:

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

Jei norite pašalinti klasę iš elemento:

Jei norite pašalinti vieną klasę elementui, nedarant įtakos kitoms potencialioms klasėms, reikalingas paprastas reguliarus išraiška:

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

Šio reguliarios išraiškos paaiškinimas yra toks:

 (?:^|\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 vėliava rodo, kad pakaitalas kartojamas, jei klasės pavadinimas pridedamas kelis kartus.

Norėdami patikrinti, ar klasė jau taikoma elementui:

Tą pačią reguliarią išraišką, kuri naudojama aukščiau, norėdami pašalinti klasę, taip pat galima naudoti kaip patikrinimą, norėdami pamatyti, ar yra tam tikra klasė:

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


Šių veiksmų priskyrimas „onclick“ įvykiams:

Nors galite rašyti „JavaScript“ tiesiogiai HTML įvykių atributų viduje (pvz., onclick="this.className+=' MyClass'" ), šis elgesys nerekomenduojamas. Didesnėse programose patogesnis kodas pasiekiamas padalijus HTML žymę į „JavaScript“ sąveikos logiką.

Pirmas žingsnis siekiant šio tikslo yra sukurti funkciją ir skambinti funkcija onclick atribute, pavyzdžiui:

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

(Jums nereikia turėti šio kodo scenarijų žymėse, tai tik pavyzdys, o JavaScript įtraukimas į atskirą failą gali būti tinkamesnis.)

Antrasis žingsnis - perkelti „onclick“ įvykį iš HTML ir į „JavaScript“, pvz., Naudojant „ addEventListener“

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

(Atkreipkite dėmesį, kad „window.onload“ dalis reikalinga, kad šios funkcijos turinys būtų įvykdytas po HTML įkėlimo - be to, „MyElement“ gali nebūti, kai skambinate „JavaScript“ kodu, kad eilutė nepavyks.)


„JavaScript“ struktūros ir bibliotekos

Anksčiau pateiktas kodas yra standartiniame „JavaScript“, tačiau įprastinė praktika yra naudoti infrastruktūrą ar biblioteką paprastesnėms užduotims supaprastinti, taip pat pataisytų klaidų ir ekstremalių atvejų, kuriuos galbūt nesuvokėte rašant kodą, naudojimui.

Kai kurie žmonės mano, kad nereikia pridėti 50KB aplinkos paprastam klasės keitimui, jei darote tam tikrą svarbų „JavaScript“ darbą ar kažką, kas gali turėti neįprasto elgesio per naršyklę, verta apsvarstyti.

(Labai apytiksliai, biblioteka yra įrankių rinkinys, skirtas konkrečiai užduočiai, o struktūra paprastai turi kelias bibliotekas ir atlieka visas pareigas.)

Pirmiau pateikti pavyzdžiai buvo pateikti žemiau, naudojant jQuery , galbūt dažniausiai naudojamą „JavaScript“ biblioteką (nors ir yra kitų, kuriuos verta ištirti).

(Atkreipkite dėmesį, kad $ čia yra jQuery objektas.)

Klasių keitimas naudojant jQuery:

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

Be to, jQuery suteikia nuorodą, jei norite pridėti klasę, jei ji nėra taikoma, arba ištrinti klasę, kuri:

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


Funkcijos priskyrimas paspaudimo įvykiui naudojant jQuery:

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

arba nereikalaujant identifikatoriaus:

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


3486
12 окт. Petro Boughtono atsakymas spalio 12 d 2008-10-12 23:45 '08 at 11:45 pm 2008-10-12 23:45

Taip pat galite tiesiog:

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

Ir norėdami perjungti klasę (pašalinkite, jei vis dar norite jį pridėti):

 document.getElementById ('id'). classList.toggle ('class');
391
05 авг. atsakymą pateikė Tyilo 05 rug . 2011-08-05 20:44 '11, 20:44, 2011-08-05 20:44

Viename iš senų projektų, kuriuose nebuvo naudojamas „jQuery“, sukūriau šias funkcijas, kad pridėtumėte, ištrintumėte ir patikrintumėte, ar elementas turi klasę:

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

Taigi, pavyzdžiui, jei noriu, kad spustelėdami pridėtumėte tam tikrą klasę, galiu naudoti šį mygtuką:

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

Dabar tikrai geriau būtų naudoti jQuery.

104
28 мая '11 в 10:32 2011-05-28 10:32 atsakymą pateikė Andrew Orsich , gegužės 28 d., 11 d

Galite naudoti „ node.className tokį:

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

Tai turėtų veikti IE5.5 ir naujesnėse versijose pagal PPK .

68
12 окт. Eric Wendelin atsakymas spalio 12 d 2008-10-12 23:33 '08 at 11:33 2008-10-12 23:33

Wow, nustebęs, yra tiek daug perpildymo atsakymų ...

 <div class="firstClass" onclick="this.className='secondClass'"> 
45
05 янв. Travio J 05 Jan atsakymas 2012-01-05 22:14 '12, 10:14 val. 2012-01-05 22:14

Naudojant gryną javascript kodą:

 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 сент. Atsakymą pateikė PseudoNinja 20 sep . 2011-09-20 18:26 '11 at 18:26 2011-09-20 18:26

Jis veikia man:

 function setCSS(eleID) { var currTabElem = document.getElementById(eleID); currTabElem.setAttribute("class", "some_class_name"); currTabElem.setAttribute("className", "some_class_name"); } 
30
08 дек. Atsakymą pateikė Gopal Krishna Ranjan 08 dec. 2011-12-08 12:36 '11, 12:36 PM 2011-12-08 12:36

Taip pat galite išplėsti „HTMLElement“ objektą, kad pridėtumėte, ištrintumėte, perjungtumėte ir išbandytumėte klases („ yist“ ):

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

Ir tada tiesiog naudokite šį (spustelėkite, jei norite pridėti ar pašalinti klasę):

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

Čia yra demonstracija .

17
11 апр. atsakymas duotas moka 11 Bal 2013-04-11 13:13 '13, 13:13, 2013-04-11 13:13

Jei norite pridėti informaciją iš kitos populiarios struktūros, „Google“ uždarymas, žr. Dom / osztály klasę:

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

Vienas iš elementų pasirinkimo variantų yra „ goog.dom.query“ su CSS3 selektoriumi:

 var myElement = goog.dom.query("#MyElement")[0]; 
15
27 нояб. Atsakymą pateikė Ben Flynn 27 lapkritis. 2011-11-27 00:04 '11 0:04, 2011-11-27 00:04

Keletas nedidelių pastabų ir nustatymų ankstesnėse įprastinėse frazėse:

Norite tai padaryti pasauliniu mastu, jei klasių sąrašas turi daugiau nei vieną klasės pavadinimą. Ir jūs tikriausiai norėtumėte pašalinti tarpas iš klasių sąrašo galų ir paversti kelias vietas į vieną erdvę, kad būtų išvengta erdvių. Nė viena iš šių problemų neturėtų būti problema, jei tik vienas kodas, atitinkantis klasės vardus, naudoja žemiau esančią įprastą išraišką ir pašalina pavadinimą prieš jį pridedant. Bet Na, kas žino, kas gali susitaikyti su klasės pavadinimų sąrašu.

Ši reguliari išraiška yra nejautrus, todėl klaidų klasės pavadinime gali būti rodomos prieš kodo naudojimą naršyklėje, kuri nerūpi klasei.

 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 atsakymą pateikė Alex Robinson, gegužės 2 d. 12 d., 07:59 2012-05-02 07:59

Pakeiskite klasės CSS klasę naudodami „JavaScript“ ASP.NET :

 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 Atsakymą pateikė Hiren Kansara gegužės 28 d. 11 val. 10:19 2011-05-28 10:19

Norėčiau naudoti jQuery ir parašyti kažką panašaus:

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

Šis kodas prideda funkciją, vadinamą, kai id elementas vadinamas kai kuriuo elementu . Funkcija prideda elemento klasės atributo paspaudimą , jei jis dar nėra jo dalis, ir ištrina, jei jis yra.

Taip, jums reikia pridėti nuorodą į jūsų puslapio jQuery biblioteką, kad galėtumėte naudoti šį kodą, tačiau bent jau galite būti tikri, kad dauguma bibliotekoje esančių funkcijų veiks beveik visose šiuolaikinėse naršyklėse, ir tai padės sutaupyti laiko savo kodui įgyvendinti. daryti tą patį.

Ačiū

11
05 мая '12 в 5:46 2012-05-05 05:46 atsakymas pateikiamas shingokko 05 gegužės 12 d. 5:46 2012-05-05 05:46

Linija

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

turėtų būti:

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/',''); 
9
09 дек. Eric Bailey atsakymas 09 Dec 2009-12-09 01:15 '09, 1:15 val. 2009-12-09 01:15

Čia yra mano versija, pilnai veikianti:

 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 } 

Naudoti:

 <tr onmouseover='addHTMLClass(this,"clsSelected")' onmouseout='removeHTMLClass(this,"clsSelected")' > 
7
17 окт. atsakymas pateikiamas alfred 17 okt. 2012-10-17 15:21 '12, 15:21 pm 2012-10-17 15:21

Čia yra toggleClass perjungimo / pridėjimo / pašalinimo klasės elementas:

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

žr. jsfiddle

taip pat matykite mano atsakymą, kad galėtumėte dinamiškai sukurti naują klasę

7
28 окт. atsakymą pateikė kofifus 28 spalis. 2015-10-28 10:00 '15 10:00 val. 2015-10-28 10:00

Pakeiskite elemento klasę vanilės javascript'e su IE6 palaikymu

Galite pabandyti naudoti mazgo attributes savybę, kad išlaikytumėte suderinamumą su senesnėmis naršyklėmis net ir IE6:

 .red { color: red; } .red:before { content: 'I am red! '; } .red:after { content: ' again'; } .blue { color: blue; } .blue:before { content: 'I am blue! ' } 
6
04 нояб. atsakymą pateikė Eugene Tiurin 04.11 . 2015-11-04 20:57 '15 ne 20:57 2015-11-04 20:57

Mano kode naudoju šias vanilės javascript funkcijas. Jie naudoja reguliarias išraiškas ir indexOf bet nereikalauja, kad reguliariai išreikštų specialių simbolių.

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

Taip pat galite naudoti elementą.classList šiuolaikinėse naršyklėse.

5
18 янв. Atsakymą pateikė Salman A sausio 18 d. 2014-01-18 12:28 '14, 12:28 2014-01-18 12:28

Tai galima padaryti.

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

Paštas

4
03 июля '16 в 17:04 2016-07-03 17:04 atsakymą pateikė Fahad Uddin liepos 03 d. 16 d. 17:04 2016-07-03 17:04

Jei norite ištrinti klasę, galite:

 ELEMENT.classList.remove("CLASS_NAME"); 

Jei norite pridėti klasę:

 ELEMENT.classList.add('CLASS_NAME'); 
3
14 нояб. atsakymą pateikė ferralucho 14 nov. 2017-11-14 03:18 '17 at 3:18 2017-11-14 03:18

Po ilgo paieškos, aš rasiu geriausią klasių valdymo sprendimą be document.getElementById ()

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

Pradinis taškas: ngn-wiki.ru.site/questions/2069 / ...

1
10 дек. atsakymas duotas 10 dec. 2016-12-10 02:19 '16 at 2:19 2016-12-10 02:19

Gerai, kad radau naudos.

 function classChangeFn() { document.getElementById("MyElement").className = ""; } window.onload = function(){ document.getElementById("MyElement").addEventListener( 'click' , classChangeFn ); } 
1
11 апр. Atsakymas, kurį pateikė Mohammed Javed , balandžio 11 d 2016-04-11 14:59 '16 at 14:59 pm 2016-04-11 14:59

Iš čia : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Paspaudus mygtuką, galite pabandyti:

pakeisti (oldClass, newClass)
Pakeičia esamą klasę nauja klasė.

Pavyzdys:

 var myDiv = document.getElementById('myElement'); myDiv.classList.contains('myCssClass'); myDiv.classList.replace("myCssClass", "myCssClass_new"); 
1
27 нояб. atsakymas įteiktas Kurkula lapkričio 27 d. 2017-11-27 22:06 '17, 10:06 pm 2017-11-27 22:06

Taip, yra daug būdų tai padaryti. ES6 sintaksėje galime lengvai pasiekti. Naudokite šį kodą, jei norite perjungti priedą ir pašalinti klasę.

 body { padding:20px; font-family:sans-serif; } ul { margin:20px 0; list-style:none; } li { background:#dfdfdf; padding:10px; margin:6px 0; cursor:pointer; } li.active { background:#2794c7; font-weight:bold; color:#ffffff; } 
 const el = document.getElementById("main"); console.log(el.classList); 
 const el = document.getElementById('container'); function addClass () { el.classList.add('newclass'); } function replaceClass () { el.classList.replace('foo', 'newFoo'); } function removeClass () { el.classList.remove('bar'); } 
 <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> 
0
21 сент. atsakymą pateikė Willem van der Veen apie 21 sep. 2018-09-21 12:23 '18, 12:23 PM 2018-09-21 12:23

Gerai, manau, kad šiuo atveju turėtumėte naudoti jQuery arba rašyti savo metodus gryname javascript'e, bet aš labiau norėčiau pridėti savo metodus, o ne įvesti visus jQuery į savo paraišką, jei to nereikia dėl kitų priežasčių.

Norėčiau padaryti kažką panašaus į žemiau kaip mano „JavaScript“ infrastruktūros metodus, pridėti tam tikrą funkciją, kuri tvarko pridedant klases, klasių šalinimą ir pan., Pvz., JQuery, tai yra visiškai palaikoma IE9 +, taip pat parašytas mano kodas ES6, todėl reikia įsitikinti, kad jūsų naršyklė palaiko ją arba naudojate kažką panašaus į babel, kitaip jums reikia naudoti ES5 sintaksę savo kode, taip pat ir tokiu būdu, mes surandame elementą per identifikatorių, o tai reiškia, kad elementas turėtų būti pasirinktas identifikatorius

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

ir galite tiesiog juos paskambinti naudodami, kaip parodyta žemiau, įsivaizduoti, kad jūsų elementas turi ID ir klasę, įsitikinkite, kad jas perduosite kaip eilutę, galite naudoti šią priemonę kaip parodyta toliau:

 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 Atsakymą Alireza pateikė gegužės 17 d., 17 val

Tik pagalvojau, kad aš jį įmetu į:

 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 atsakymą pateikė PHPglue kovo 15 d. 15 val. 5:35 2015-03-20 05:35

tiesiog pasakykite myElement.classList="new-class" , jei nereikia palaikyti kitų esamų klasių, tokiu atveju galite naudoti metodus classList.add, .remove .

 div{ min-height:48px; min-width:48px; } .bordered{ border: 1px solid black; } .green{ background:green; } .blue{ background: blue; } 
 function ClassChange () { var button=document.getElementById("button"); button.setAttribute("class","button2"); } 
šios nuorodos . 

-1
05 янв. Sajido atsakymas yra sausio 5 d 2016-01-05 21:49 '16 at 21:49 2016-01-05 21:49

Čia yra paprastas jQuery kodas.

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

Čia

  • 1 klasė yra klausytoja.
  • Tėvų klasė yra klasė, kurioje yra klasė, kurią norite keisti.
  • Classtoremove yra senoji klasė, kurią turite.
  • Pridėta klasė yra nauja klasė, kurią norite pridėti.
  • 100 yra laukimo laikas, per kurį klasė keičiasi.

Sėkmės.

-4
06 апр. atsakymas pateikiamas uttamcafedeweb 06 Bal. 2014-04-06 09:10 '14 at 9:10 2014-04-06 09:10
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос