Bir ├Â─čenin s─▒n─▒f─▒n─▒ JavaScript ile nas─▒l de─či┼čtirebilirim?


Al─▒nan cevaba git


onclick JavaScript kullanarak bir olaya yan─▒t olarak bir HTML ├Â─česinin s─▒n─▒f─▒n─▒ nas─▒l de─či┼čtirebilirim ?


2618









Cevap say─▒s─▒n─▒ say: 30






S─▒n─▒flar─▒ de─či┼čtirmek i├žin modern HTML5 teknikleri

Modern taray─▒c─▒lar, bir k├╝t├╝phaneye ihtiya├ž duymadan s─▒n─▒flar─▒ de─či┼čtirmeyi kolayla┼čt─▒racak y├Ântemler sunan classList'i ekledi:

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

Bir olsa Ne yaz─▒k ki bu, v10 ├Âncesinde Internet Explorer ├žal─▒┼čmaz pul temin IE8 ve IE9 i├žin bunun i├žin destek eklemek i├žin, bu sayfada . Yine de daha fazla destek almak .

Basit taray─▒c─▒lar aras─▒ ├ž├Âz├╝m

Bir ├Â─čeyi se├žmek i├žin standart JavaScript yolu kullan─▒yor document.getElementById("Id") , bu da a┼ča─č─▒daki ├Ârneklerin kulland─▒─č─▒ ┼čeydir - elbette ba┼čka ┼čekillerde ├Â─čeler elde edebilirsiniz ve do─čru durumda this bunun yerine kullanabilirsiniz - ancak, bununla ilgili ayr─▒nt─▒l─▒ bilgi almak kapsam─▒n d─▒┼č─▒ndad─▒r Cevap

Bir ├Â─čenin t├╝m s─▒n─▒flar─▒n─▒ de─či┼čtirmek i├žin:

Mevcut t├╝m s─▒n─▒flar─▒ bir veya daha fazla yeni s─▒n─▒fla de─či┼čtirmek i├žin className niteli─čini ayarlay─▒n:

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

(Birden fazla s─▒n─▒f uygulamak i├žin bo┼člukla ayr─▒lm─▒┼č bir liste kullanabilirsiniz.)

Bir elemana ek bir s─▒n─▒f eklemek i├žin:

Bir ├Â─čeye bir s─▒n─▒f eklemek i├žin, varolan de─čerleri kald─▒rma / etkilemeden, ┼č├Âyle bir bo┼čluk ve yeni s─▒n─▒f ad─▒ ekleyin:

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

Bir s─▒n─▒f─▒ bir ├Â─čeden kald─▒rmak i├žin:

Tek bir s─▒n─▒f─▒ bir elemana kald─▒rmak i├žin, di─čer potansiyel s─▒n─▒flar─▒ etkilemeden, basit bir regex de─či┼čtirme gereklidir:

 document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
 

Bu regex'in a├ž─▒klamas─▒ ┼č├Âyledir:

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

g Bayrak gerekli durumlarda s─▒n─▒f ad─▒ eklendi birden ├žok kez olarak tekrar─▒na yerini s├Âyler.

Bir s─▒n─▒f─▒n bir elemana zaten uygulanm─▒┼č olup olmad─▒─č─▒n─▒ kontrol etmek i├žin:

Bir s─▒n─▒f─▒ kald─▒rmak i├žin yukar─▒da kullan─▒lan ayn─▒ regex, ayr─▒ca belirli bir s─▒n─▒f─▒n olup olmad─▒─č─▒n─▒n kontrol├╝ olarak da kullan─▒labilir:

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


Bu i┼člemleri onclick etkinliklerine atama:

JavaScript'i do─črudan HTML olay ├Âzniteliklerine (├Ârne─čin onclick="this.className+=' MyClass'" ) i├žine yazmak m├╝mk├╝n olsa da, bu ├Ânerilmez. ├ľzellikle daha b├╝y├╝k uygulamalarda, HTML i┼čaretlemesini JavaScript etkile┼čim mant─▒─č─▒ndan ay─▒rarak daha fazla bak─▒m yap─▒labilir kod elde edilir.

Bunu ba┼čarman─▒n ilk ad─▒m─▒ bir i┼člev olu┼čturmak ve i┼člevi onclick ├Âzniteli─činde ├ža─č─▒rmakt─▒r, ├Ârne─čin:

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

(Bu kodun kod etiketlerinde bulunmas─▒ gerekli de─čildir, bu sadece ├Ârne─čin k─▒saltmas─▒ i├žindir ve JavaScript'i farkl─▒ bir dosyaya dahil etmek daha uygun olabilir.)

─░kinci ad─▒m, onclick olay─▒n─▒ HTML'den ve JavaScript'e ta┼č─▒mak, ├Ârne─čin addEventListener kullanarakhttps://developer.mozilla.org/en-US/docs/DOM/element.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>
 

(Window.onload b├Âl├╝m├╝n├╝n gerekli oldu─čunu unutmay─▒n; b├Âylece bu i┼člevin i├žeri─či HTML'nin y├╝klenmesini tamamlad─▒ktan sonra y├╝r├╝t├╝l├╝r - bu olmadan, JavaScript kodu ├ža─čr─▒ld─▒─č─▒nda MyElement bulunmayabilir, bu sat─▒r ba┼čar─▒s─▒z olur.)


JavaScript ├çer├ževeleri ve K├╝t├╝phaneleri

Yukar─▒daki kodlar─▒n t├╝m├╝ standart JavaScript'tir, ancak genel g├Ârevleri kolayla┼čt─▒rmak i├žin bir ├žer├ževe veya kitapl─▒k kullanmak, ayr─▒ca kodunuzu yazarken d├╝┼č├╝nmeyece─činiz sabit hatalar ve son durumlardan faydalanmak yayg─▒n bir uygulamad─▒r.

Baz─▒ insanlar sadece bir s─▒n─▒f─▒ de─či┼čtirmek i├žin ~ 50 KB'lik bir ├žer├ževe eklemenin ├Ânemsiz oldu─čunu d├╝┼č├╝n├╝rken, ├Ânemli miktarda JavaScript ├žal─▒┼čmas─▒ veya ola─čand─▒┼č─▒ taray─▒c─▒lar aras─▒ davran─▒┼ča sahip olabilecek herhangi bir ┼čey yap─▒yorsan─▒z, dikkate de─čer.

(├çok kabaca, bir k├╝t├╝phane belirli bir g├Ârev i├žin tasarlanm─▒┼č bir ara├ž setidir, bununla birlikte bir ├žer├ževe genellikle birden fazla k├╝t├╝phane i├žerir ve bir dizi g├Ârevi yerine getirir.)

Yukar─▒daki ├Ârnekler , muhtemelen en s─▒k kullan─▒lan JavaScript k├╝t├╝phanesi olan jQuery kullan─▒larak a┼ča─č─▒da ├žo─čalt─▒lm─▒┼čt─▒r (ara┼čt─▒rmaya de─čer ba┼čkalar─▒ da vard─▒r).

( $ Burada jQuery nesnesi oldu─čuna dikkat edin.)

JQuery ile S─▒n─▒flar─▒ De─či┼čtirme:

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

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

if ( $('#MyElement').hasClass('MyClass') )
 

Buna ek olarak, jQuery, uygulanm─▒yorsa bir s─▒n─▒f eklemek veya a┼ča─č─▒dakileri yapan bir s─▒n─▒f─▒ kald─▒rmak i├žin bir k─▒sayol sa─člar:

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


JQuery ile click olay─▒na bir i┼člev atama:

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

veya bir kimli─če ihtiya├ž duymadan:

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



3708







Ayr─▒ca ┼čunlar─▒ da yapabilirsiniz:

. Document.getElementById ( 'id) classList.add ( 's─▒n─▒f');
. Document.getElementById ( 'id) classList.remove ( 's─▒n─▒f');

Ve bir s─▒n─▒f aras─▒nda ge├ži┼č yapmak i├žin (varsa ba┼čkalar─▒ varsa ekleyin):

. Document.getElementById ( 'id) classList.toggle ( 's─▒n─▒f');

403







JQuery kullanmayan eski projelerimden birinde, eleman─▒n s─▒n─▒f olup olmad─▒─č─▒n─▒ eklemek, kald─▒rmak ve kontrol etmek i├žin a┼ča─č─▒daki i┼člevleri olu┼čturdum:

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

├ľrne─čin, onclick d├╝─čmeye bir s─▒n─▒f eklemek istersem, ┼čunu kullanabilirim:

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

┼×imdiye kadar jQuery kullanmak daha iyi olurdu.


109







├ľyle kullanabilirsiniz node.className :

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

Bu IE5.5 ve uygun kadar ├žal─▒┼čmal─▒d─▒r PPK .


74







Saf JavaScript kodunu kullanarak:

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

45







Vay be, ┼ča┼č─▒rm─▒┼č cevaplar─▒n ├žok fazla olmas─▒na ┼ča┼č─▒rd─▒m ...

 <div class="firstClass" onclick="this.className='secondClass'">
 

45







Bu benim i├žin ├žal─▒┼č─▒yor:

 function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}
 

31







Ayr─▒ca, HTMLElement nesnesini geni┼čletip, s─▒n─▒flar─▒ ekleme, kald─▒rma, de─či┼čtirme ve kontrol etme y├Ântemlerini eklemek i├žin ( yald─▒z ):

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

Ve sonra sadece b├Âyle kullan─▒n (t─▒kland─▒─č─▒nda s─▒n─▒f─▒ ekler veya siler):

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

─░┼čte demo .


19


2013-04-11





Ba┼čka bir pop├╝ler ├žer├ževeden bilgi eklemek i├žin, Google Closures, kendi dom / class s─▒n─▒f─▒na bak─▒n:

 goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)
 

├ľ─čeyi se├žmek i├žin bir se├ženek , bir CSS3 se├žicili goog.dom.query kullanmakt─▒r :

 var myElement = goog.dom.query("#MyElement")[0];
 

16







├ľnceki regex'lerde birka├ž k├╝├ž├╝k not ve tweaks:

S─▒n─▒f listesinin s─▒n─▒f ad─▒na birden fazla defa sahip olmas─▒ durumunda, bunu global olarak yapmak isteyeceksiniz. Ve muhtemelen s─▒n─▒f listesinin sonlar─▒ndan bo┼čluklar─▒ soymak ve ├žok say─▒da alan─▒ bir bo┼čluk haline d├Ân├╝┼čt├╝rmek isteyeceksiniz. Bunlar─▒n hi├žbiri, s─▒n─▒f isimleri ile g├Âsterilen tek kod a┼ča─č─▒daki regex'i kullan─▒r ve eklemeden ├Ânce bir ismi kald─▒r─▒rsa, problem olmamal─▒d─▒r. Fakat. Kim s─▒n─▒f ismi listesiyle ... ... ilgilendi─čini bilen var.

Bu regex b├╝y├╝k / k├╝├ž├╝k harf duyars─▒zd─▒r, bu nedenle s─▒n─▒f adlar─▒ndaki hatalar, s─▒n─▒f adlar─▒ndaki b├╝y├╝k / k├╝├ž├╝k harflerle ilgilenmeyen bir taray─▒c─▒da kod kullan─▒lmadan ├Ânce g├Âsterilebilir.

 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







Bir ├Â─čenin CSS s─▒n─▒f─▒n─▒ ASP.NET'te JavaScript ile de─či┼čtirin :

 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







JQuery kullan─▒r ve b├Âyle bir ┼čey yazard─▒m:

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

Bu kod id unsuru oldu─čunda bir i┼člev ├ža─čr─▒lacak ekleyen bir-├Â─če t─▒klan─▒r. Fonksiyon ekler t─▒kland─▒─č─▒nda zaten bunun bir par├žas─▒ de─čil ve orada m─▒ kald─▒r─▒r e─čer ├Â─čenin s─▒n─▒f ├Âzniteli─či i├žin.

Evet, bu kodu kullanmak i├žin sayfan─▒zdaki jQuery k├╝t├╝phanesine bir referans eklemeniz gerekir, ancak en az─▒ndan k├╝t├╝phanedeki ├žo─ču fonksiyonun modern taray─▒c─▒lar─▒n hemen hemen hepsinde i┼če yarayaca─č─▒ndan emin olabilirsiniz. ayn─▒s─▒n─▒ yapmak i├žin kendi kodunuzu girin.

Te┼čekk├╝rler


11







Çizgi

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

olmal─▒:

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

9







─░┼čte benim versiyonum, tamamen ├žal─▒┼č─▒yor:

 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
}
 

Kullan─▒m─▒:

 <tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
 

7







─░┼čte bir elementin s─▒n─▒f─▒n─▒ de─či┼čtirmek / eklemek / kald─▒rmak i├žin bir toggleClass:

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

bkz jsfiddle

Ayr─▒ca dinamik olarak yeni bir s─▒n─▒f olu┼čturmak i├žin cevab─▒m─▒ burada g├Âr .


7







IE6 deste─čiyle bir ├Â─čenin s─▒n─▒f─▒n─▒ vanilya JavaScriptÔÇÖinde de─či┼čtirme

attributes IE6'da bile eski taray─▒c─▒larla uyumlulu─ču korumak i├žin node ├Âzelli─čini kullanmay─▒ deneyebilirsiniz :

 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> 


6







Kodumda a┼ča─č─▒daki vanilya JavaScript fonksiyonlar─▒n─▒ kullan─▒yorum. Normal ifadeler kullan─▒rlar, indexOf ancak normal ifadelerde ├Âzel karakterlerden al─▒nt─▒ yapmalar─▒ gerekmez.

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

Element.classList'i modern taray─▒c─▒larda da kullanabilirsiniz .


5







Sadece ┼čunu att─▒─č─▒m─▒ d├╝┼č├╝nd├╝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







sadece myElement.classList="new-class" mevcut di─čer s─▒n─▒flar─▒ koruman─▒z gerekmedi─či takdirde bu durumda classList.add, .remove y├Ântemleri kullanabilece─činizi s├Âyleyin .

 var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
}); 
 div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
} 
 <button id="go">Change Class</button>

<div id="one" class="bordered green">

</div> 


0







Tamam, bence bu durumda jQuery kullanmal─▒ veya kendi metodlar─▒n─▒z─▒ saf javascript ile yazmal─▒s─▒n─▒z, benim tercihim, ba┼čka nedenlerden ├Ât├╝r├╝ buna gerek duymuyorsam, uygulamama t├╝m jQuery'leri enjekte etmektense kendi metodlar─▒m─▒ eklemektir.

S─▒n─▒f ekleme, s─▒n─▒flar─▒ silme, vb. JQuery'e benzer, birka├ž fonksiyon eklemek i├žin javascript ├žer├ževeme a┼ča─č─▒daki gibi y├Ântemler yapmak istiyorum. Bu, IE9 + 'da tam olarak destekleniyor, kodum da ES6'da yaz─▒yor. Taray─▒c─▒n─▒z─▒n bunu destekledi─činden veya babil gibi bir ┼čey kulland─▒─č─▒n─▒zdan emin olmak i├žin, aksi halde kodunuzda ES5 s├Âzdizimini kullanman─▒z gerekir, bu ┼čekilde, ID yoluyla da eleman buluruz, yani ├Â─čenin se├žilmesi gereken bir kimli─či olmas─▒ gerekir:

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

}
 

ve bunlar─▒ a┼ča─č─▒daki gibi kullanmak i├žin ├ža─č─▒rabilir, ├Â─čenizin 'id' ve 'class' s─▒n─▒f kimli─čine sahip oldu─čunu hayal edin, onlar─▒ bir dizge olarak ge├žirdi─činizden emin olun, asa─č─▒daki gibi kullanabilirsiniz:

 classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
 

0







classList DOM API:

S─▒n─▒f eklemek ve kald─▒rmak i├žin ├žok uygun bir y├Ântem classList DOM API'dir. Bu API, javascript kullanarak listeyi de─či┼čtirmek i├žin belirli bir DOM ├Â─česinin t├╝m s─▒n─▒flar─▒n─▒ se├žmemize izin verir. ├ľrne─čin:

 const el = document.getElementById("main");
console.log(el.classList); 
 <div class="content wrapper animated" id="main"></div> 

G├╝nl├╝kte, yaln─▒zca elementin s─▒n─▒flar─▒n─▒ de─čil ayn─▒ zamanda bir├žok yard─▒mc─▒ y├Ântemi ve ├Âzelli─či de i├žeren bir nesneyi geri ald─▒─č─▒m─▒z─▒ g├Âzlemleyebiliriz. Bu nesne, DOM'da , belirte├žleri (benzeri s─▒n─▒flar) ayr─▒lm─▒┼č bir alan k├╝mesini temsil etmek i├žin kullan─▒lan bir arabirim olan DOMTokenList arabiriminden devral─▒r .

├ľrnek:

 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>
   


0







Evet, bunu yapman─▒n bir├žok yolu var. ES6 s├Âzdiziminde kolayca ba┼čarabiliriz. S─▒n─▒f eklemek ve kald─▒rmak i├žin bu kodu ge├ži┼č kullan─▒n.

 const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
} 
 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;
} 
 <i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul> 


0







Deneyin

 function change(el) { el.className='second' } 
 .first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in } 
 <button  onclick="change(box)">Click me</button>
<div id="box" class="first"></div> 


0








SEÇENEKLER.

─░┼čte size elinizde bulunan se├ženeklerin classList neler oldu─čunu ve istedi─činiz ┼čeyi yapmak i├žin nas─▒l kullanaca─č─▒n─▒z─▒ g├Ârmenize olanak tan─▒yan k├╝├ž├╝k bir stil ve classList ├Ârnekleri .

style vs. classList

Aras─▒ndaki fark style ve classList birlikte olmas─▒d─▒r style E─čer eleman─▒n stil ├Âzelliklerine ekliyoruz, ancak classList t├╝r eleman─▒n s─▒n─▒f (es) kontrol ediyor ( add , remove , toggle , contain ), ben nas─▒l kullan─▒laca─č─▒n─▒ g├Âsterece─čim add ve remove nedeni, s├Âz y├Ântemi pop├╝ler olanlar─▒.


Stil ├ľrne─či

Bir margin-top elemana ├Âzellik eklemek isterseniz, a┼ča─č─▒daki gibi yapars─▒n─▒z:

 // Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.
 

classList ├ľrnek

Diyelim ki <div class="class-a class-b"> , bu durumda, div elementimize zaten eklenmi┼č 2 s─▒n─▒fa sahibiz class-a ve class-b ve hangi s─▒n─▒fa remove ve hangi s─▒n─▒fa gidece─čimizi kontrol etmek istiyoruz add . Buras─▒ classList kullan─▒┼čl─▒ bir yer.

Kald─▒r class-b

 // Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

 

Eklemek class-c

 // Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

 


0







 function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}
 

Yukar─▒da kabul edilen cevab─▒ kullanarak s─▒n─▒f eklemek ve kald─▒rmak i├žin basit bir taray─▒c─▒lar aras─▒ i┼člevdir

s─▒n─▒f ekle:

 classed(document.getElementById("denis"), "active", true)
 

s─▒n─▒f─▒ kald─▒r:

 classed(document.getElementById("denis"), "active", false)
 

0







├çok fazla cevap, ├žok say─▒da iyi cevap.

TL; DR:

 document.getElementById('id').className = 'class'
 

VEYA

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

Bu kadar.

Ve nedenini ger├žekten bilmek istiyorsan ve kendini e─čitmek istiyorsan Peter Boughton'─▒n cevab─▒n─▒ okuman─▒ ├Âneririm , m├╝kemmel.

Not:
Bu ( belge veya olay ) ile m├╝mk├╝nd├╝r :

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()

0







├çal─▒┼čma JavaScript 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>
 

Bir ├žal─▒┼čma kodunu bu linkten indirebilirsiniz .


-1







─░┼čte bunu yapmak i├žin basit bir jQuery kodu.

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

─░┼čte,

  • Class1 bir olay─▒n dinleyicisidir.
  • ├ťst s─▒n─▒f, de─či┼čtirmek istedi─činiz s─▒n─▒f─▒ bar─▒nd─▒ran s─▒n─▒ft─▒r.
  • Classtoremove, sahip oldu─čunuz eski s─▒n─▒ft─▒r.
  • Eklenecek s─▒n─▒f, eklemek istedi─činiz yeni s─▒n─▒ft─▒r.
  • 100, s─▒n─▒f─▒n de─či┼čtirildi─či zaman a┼č─▒m─▒ gecikmesidir.

─░yi ┼čanslar.


-4







Bu jQuery gibi bir k├╝t├╝phane ile en kolay olan─▒d─▒r:

 <input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>
 

-21







Al─▒nma ama CSS terc├╝man─▒n─▒ t├╝m web sayfas─▒n─▒n g├Ârsel sunumunu yeniden hesaplamaya zorlad─▒─č─▒ i├žin s─▒n─▒f─▒ an─▒nda de─či┼čtirmek a├ž─▒k de─čildir.

Bunun nedeni, CSS terc├╝man─▒n─▒n herhangi bir miras veya kademeli de─či┼čimin de─či┼čip de─či┼čmeyece─čini bilmesinin neredeyse imkans─▒z olmas─▒d─▒r, bu nedenle k─▒sa cevap:

Asla hi├žbir zaman ClassName'i de─či┼čtirmeyin! -)

Ancak genellikle yaln─▒zca bir veya iki m├╝lk├╝ de─či┼čtirmeniz gerekecektir ve bu kolayca uygulanabilir:

 function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}
 

-59