ฉันจะเปลี่ยนคลาสขององค์ประกอบ HTML เพื่อตอบสนองต่อonclickเหตุการณ์โดยใช้ JavaScript ได้อย่างไร

เทคนิค 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');

น่าเสียดายที่สิ่งเหล่านี้ไม่สามารถใช้งานได้ใน Internet Explorer ก่อนหน้า v10 แม้ว่าจะมีshim ที่จะเพิ่มการรองรับให้กับ IE8 และ IE9 ที่มีอยู่ในหน้านี้ มันเป็น แต่ได้รับมากขึ้นและได้รับการสนับสนุน

โซลูชันข้ามเบราว์เซอร์ที่เรียบง่าย

วิธีจาวาสคริปต์มาตรฐานในการเลือกองค์ประกอบที่ใช้document.getElementById("Id")ซึ่งเป็นตัวอย่างต่อไปนี้ที่ใช้ - แน่นอนว่าคุณสามารถรับองค์ประกอบในรูปแบบอื่นและในสถานการณ์ที่ถูกต้องอาจใช้thisแทนได้ - อย่างไรก็ตามจะมีรายละเอียดที่เกินขอบเขต ของคำตอบ

ในการเปลี่ยนคลาสทั้งหมดสำหรับองค์ประกอบให้ทำดังนี้

หากต้องการแทนที่คลาสที่มีอยู่ทั้งหมดด้วยคลาสใหม่หนึ่งคลาสขึ้นไปให้ตั้งค่าแอตทริบิวต์ className:

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

(คุณสามารถใช้รายการที่คั่นด้วยช่องว่างเพื่อใช้หลายคลาสได้)

ในการเพิ่มคลาสเพิ่มเติมให้กับองค์ประกอบให้ทำดังนี้

ในการเพิ่มคลาสให้กับองค์ประกอบโดยไม่ต้องลบ / ส่งผลกระทบต่อค่าที่มีอยู่ให้ผนวกช่องว่างและชื่อคลาสใหม่ดังนี้:

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

ในการลบคลาสออกจากองค์ประกอบให้ทำดังนี้

ในการลบคลาสเดียวออกจากองค์ประกอบโดยไม่กระทบต่อคลาสที่มีศักยภาพอื่น ๆ จำเป็นต้องมีการแทนที่ regex อย่างง่าย:

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

คำอธิบายของ regex นี้มีดังนี้:

(?:^|\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ธงบอกแทนที่ที่จะทำซ้ำตามความจำเป็นในกรณีที่ชื่อชั้นได้รับการเพิ่มหลายครั้ง

วิธีตรวจสอบว่ามีการใช้คลาสกับองค์ประกอบหรือไม่:

regex เดียวกับที่ใช้ด้านบนสำหรับการลบคลาสยังสามารถใช้เป็นการตรวจสอบว่ามีคลาสเฉพาะอยู่หรือไม่:

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

การกำหนดการกระทำเหล่านี้ให้กับเหตุการณ์ onclick:

ในขณะที่เป็นไปได้ที่จะเขียน JavaScript โดยตรงภายในแอตทริบิวต์เหตุการณ์ HTML (เช่นonclick="this.className+=' MyClass'") สิ่งนี้ไม่แนะนำให้ใช้ โดยเฉพาะอย่างยิ่งในแอปพลิเคชันขนาดใหญ่รหัสที่สามารถบำรุงรักษาได้มากขึ้นก็คือการแยกมาร์กอัพ HTML ออกจากตรรกะการโต้ตอบ JavaScript

ขั้นตอนแรกในการบรรลุเป้าหมายนี้คือการสร้างฟังก์ชันและเรียกใช้ฟังก์ชันในแอตทริบิวต์ onclick เช่น:

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

_{(ไม่จำเป็นต้องมีรหัสนี้ในแท็กสคริปต์นี่เป็นเพียงตัวอย่างสั้น ๆ และรวมถึง JavaScript ในไฟล์ที่แตกต่างกันอาจเหมาะสมกว่า)}

ขั้นตอนที่สองคือการย้ายเหตุการณ์ onclick จาก HTML และเป็น JavaScript เช่นใช้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 เพื่อให้เนื้อหาของฟังก์ชั่นนั้นทำงานหลังจาก HTML เสร็จสิ้นการโหลด - หากไม่มีสิ่งนี้ MyElement อาจไม่มีอยู่เมื่อเรียกใช้รหัส JavaScript ดังนั้นบรรทัดนั้นจะล้มเหลว)

เฟรมเวิร์กและไลบรารี JavaScript

โค้ดข้างต้นนั้นอยู่ในจาวาสคริปต์มาตรฐานอย่างไรก็ตามเป็นเรื่องธรรมดาที่จะใช้เฟรมเวิร์กหรือไลบรารีเพื่อทำให้งานทั่วไปง่ายขึ้นรวมถึงได้รับประโยชน์จากบั๊กคงที่และตัวพิมพ์ขอบที่คุณอาจไม่ได้คิดเมื่อเขียนรหัสของคุณ

ในขณะที่บางคนคิดว่ามันเกินความจริงที่จะเพิ่มกรอบงาน ~ 50 KB สำหรับการเปลี่ยนชั้นเรียนถ้าคุณทำงาน JavaScript จำนวนมากหรืออะไรก็ตามที่อาจมีพฤติกรรมข้ามเบราว์เซอร์ที่ผิดปกติ

(คร่าวๆแล้วไลบรารีคือชุดของเครื่องมือที่ออกแบบมาสำหรับงานเฉพาะในขณะที่เฟรมเวิร์กมักมีหลายไลบรารีและทำหน้าที่ครบชุด)

ตัวอย่างข้างต้นได้รับการทำซ้ำด้านล่างโดยใช้jQueryซึ่งอาจเป็นไลบรารี JavaScript ที่ใช้บ่อยที่สุด (แม้ว่าจะมีคนอื่นที่น่าสนใจเช่นกัน)

(โปรดทราบว่า$นี่คือวัตถุ 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);

คุณสามารถทำได้เช่นกัน:

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

และเพื่อสลับชั้น (ลบถ้ามีอยู่เพิ่ม):

document.getElementById('id').classList.toggle('class');

ในหนึ่งในโครงการเก่าของฉันที่ไม่ได้ใช้ jQuery ฉันสร้างฟังก์ชันต่อไปนี้เพื่อเพิ่มลบและตรวจสอบว่าองค์ประกอบมีคลาสหรือไม่:

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

คุณสามารถใช้node.classNameเช่น:

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

นี้จะทำงานใน IE5.5 ขึ้นไปตามPPK

ว้าวแปลกใจที่มีคำตอบ overkill มากมายที่นี่ ...

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

ใช้รหัส 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);
    }
}

นี่ใช้งานได้สำหรับฉัน:

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

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

และคุณสามารถขยายวัตถุ HTMLElement เพื่อเพิ่มวิธีการเพิ่มลบสลับและตรวจสอบคลาส ( ส่วนสำคัญ ):

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

นี่คือการสาธิต

เพียงเพิ่มข้อมูลจากกรอบงานยอดนิยมอื่น Google Closures ดูชั้นเรียน / ชั้นเรียนของพวกเขา:

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

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

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

ทางเลือกหนึ่งสำหรับการเลือกองค์ประกอบคือการใช้goog.dom.queryกับตัวเลือก CSS3:

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

คู่ของโน้ตเล็กน้อยและปรับแต่งใน regexes ก่อนหน้า:

คุณจะต้องทำมันทั่วโลกในกรณีที่รายการคลาสมีชื่อคลาสมากกว่าหนึ่งครั้ง และคุณอาจต้องการตัดช่องว่างจากส่วนท้ายของรายการชั้นเรียนและแปลงช่องว่างหลายช่องให้เป็นหนึ่งช่องว่างเพื่อป้องกันการเรียกใช้ช่องว่าง สิ่งเหล่านี้ไม่มีปัญหาใด ๆ หากรหัสเดียวที่มีชื่อคลาสนั้นใช้ regex ด้านล่างและลบชื่อออกก่อนที่จะเพิ่ม แต่. ใครจะรู้ว่าใครกำลังคิดว่าจะมีรายชื่อคลาสอยู่

regex นี้เป็นกรณีตายเพื่อให้ข้อบกพร่องในชื่อชั้นอาจแสดงขึ้นก่อนรหัสที่ใช้ในเบราว์เซอร์ที่ไม่เกี่ยวกับการดูแลในกรณีที่ชื่อชั้นเรียน

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, ' ') + "]");

เปลี่ยนคลาส CSS ขององค์ประกอบด้วย 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

ฉันจะใช้ jQuery และเขียนสิ่งนี้:

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

รหัสนี้เพิ่มฟังก์ชั่นที่จะเรียกเมื่อองค์ประกอบของ id องค์ประกอบคลิกที่ ฟังก์ชั่นผนวกคลิกที่แอตทริบิวต์ class ขององค์ประกอบถ้ามันไม่ได้เป็นส่วนหนึ่งของมันและลบออกถ้ามันมี

ใช่คุณจำเป็นต้องเพิ่มการอ้างอิงไปยังไลบรารี jQuery ในหน้าของคุณเพื่อใช้รหัสนี้ แต่อย่างน้อยคุณก็สามารถมั่นใจได้ว่าฟังก์ชั่นส่วนใหญ่ในห้องสมุดจะทำงานบนเบราว์เซอร์สมัยใหม่ทั้งหมดและมันจะช่วยให้คุณประหยัดเวลา รหัสของคุณเองที่จะทำเช่นเดียวกัน

ขอบคุณ

เส้น

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

ควรจะเป็น:

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

เปลี่ยนคลาสขององค์ประกอบในวานิลลา JavaScript ด้วยการรองรับ IE6

คุณอาจลองใช้attributesคุณสมบัติของโหนดเพื่อให้เข้ากันได้กับเบราว์เซอร์เก่าแม้ IE6:

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>

นี่คือเวอร์ชันของฉันซึ่งทำงานได้อย่างสมบูรณ์:

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

นี่คือ 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;
}

ดูjsfiddle

ดูคำตอบของฉันที่นี่เพื่อสร้างคลาสใหม่แบบไดนามิก

ฉันใช้ฟังก์ชัน JavaScript วานิลลาต่อไปนี้ในรหัสของฉัน พวกเขาใช้นิพจน์ปกติและindexOfไม่จำเป็นต้องมีการอ้างอิงอักขระพิเศษในนิพจน์ทั่วไป

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ในเบราว์เซอร์สมัยใหม่

ตัวเลือก

ต่อไปนี้เป็นรูปแบบเล็กน้อยกับตัวอย่าง classList เพื่อให้คุณเห็นตัวเลือกที่คุณมีและวิธีใช้classListในการทำสิ่งที่คุณต้องการ

style เมื่อเทียบกับ classList

ความแตกต่างระหว่างstyleและclassListเป็นที่ที่มีstyleคุณกำลังเพิ่มคุณสมบัติของรูปแบบขององค์ประกอบ แต่classListครับคือการควบคุมชั้น (e) ขององค์ประกอบ ( add, remove, toggle, contain) ผมจะแสดงให้คุณวิธีการใช้addและremoveวิธีการเหล่านั้นมีตั้งแต่ คนที่เป็นที่นิยม

ตัวอย่างสไตล์

หากคุณต้องการเพิ่มmargin-topคุณสมบัติเข้าไปในองค์ประกอบคุณจะต้องทำดังนี้:

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

สมมติว่าเรามี a <div class="class-a class-b">ในกรณีนี้เรามี 2 คลาสที่เพิ่มเข้าไปในองค์ประกอบ div ของเราแล้วclass-aและclass-bและเราต้องการควบคุมว่าคลาสremoveใดและคลาสaddใด นี่คือที่classListกลายเป็นประโยชน์

ลบ class-b

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

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

เพิ่ม class-c

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

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

แค่คิดว่าฉันจะโยนสิ่งนี้ใน:

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

เพียงแค่บอกว่าmyElement.classList="new-class"ถ้าคุณไม่ต้องการที่จะรักษาชั้นเรียนอื่น ๆ ที่มีอยู่ในกรณีที่คุณสามารถใช้classList.add, .removeวิธีการ

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>

ตกลงฉันคิดว่าในกรณีนี้คุณควรใช้ jQuery หรือเขียนวิธีการของคุณเองในจาวาสคริปต์บริสุทธิ์การตั้งค่าของฉันคือการเพิ่มวิธีการของตัวเองมากกว่าการฉีด jQuery ทั้งหมดไปยังแอปพลิเคชันของฉัน

ฉันต้องการทำบางอย่างเช่นด้านล่างเป็นวิธีการในกรอบงานจาวาสคริปต์ของฉันเพื่อเพิ่มฟังก์ชั่นบางอย่างที่จัดการเพิ่มคลาส, การลบคลาส, ฯลฯ คล้ายกับ jQuery ซึ่งรองรับ IE9 + ได้อย่างเต็มที่และโค้ดของฉันเขียนใน ES6 ดังนั้นคุณต้อง เพื่อให้แน่ใจว่าเบราว์เซอร์ของคุณรองรับหรือคุณใช้บางอย่างเช่นบาเบลมิฉะนั้นจะต้องใช้ไวยากรณ์ ES5 ในรหัสของคุณด้วยวิธีนี้เราค้นหาองค์ประกอบผ่าน ID ซึ่งหมายความว่าองค์ประกอบต้องมี ID ที่จะเลือก:

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

}

และคุณสามารถเรียกใช้พวกมันได้ด้านล่างจินตนาการว่าองค์ประกอบของคุณมี id ของ 'id' และ class ของ 'class' ตรวจสอบให้แน่ใจว่าคุณส่งมันเป็นสตริงคุณสามารถใช้ util ดังต่อไปนี้:

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

classList DOM API:

วิธีที่สะดวกมากในการเพิ่มและลบคลาสคือclassListDOM API API นี้ช่วยให้เราสามารถเลือกคลาสทั้งหมดขององค์ประกอบ DOM เฉพาะเพื่อแก้ไขรายการโดยใช้ javascript ตัวอย่างเช่น:

const el = document.getElementById("main");
console.log(el.classList);

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

เราสามารถสังเกตได้ในบันทึกที่เราได้รับกลับวัตถุที่ไม่เพียง แต่ชั้นเรียนขององค์ประกอบ แต่ยังวิธีการเสริมและคุณสมบัติมากมาย วัตถุนี้สืบทอดมาจากอินเตอร์เฟสDOMTokenListซึ่งเป็นอินเตอร์เฟสที่ใช้ใน DOM เพื่อแสดงชุดของช่องว่างที่แยกโทเค็น (เช่นคลาส)

ตัวอย่าง:

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>
  

ใช่มีหลายวิธีในการทำเช่นนี้ ในไวยากรณ์ ES6 เราสามารถบรรลุได้อย่างง่ายดาย ใช้รหัสนี้เพื่อสลับเพิ่มและลบคลาส

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>

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

การใช้คำตอบที่ได้รับการยอมรับด้านบนนี้เป็นฟังก์ชั่นข้ามเบราว์เซอร์ที่ใช้ง่ายเพื่อเพิ่มและลบคลาส

เพิ่มคลาส:

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

ลบคลาส:

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

คำตอบมากมายคำตอบที่ดีมากมาย

TL; DR:

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

หรือ

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

แค่นั้นแหละ.

และถ้าคุณต้องการทราบสาเหตุและให้การศึกษาด้วยตัวเองฉันขอแนะนำให้อ่านคำตอบของ Peter Boughtonมันสมบูรณ์แบบ

หมายเหตุ:
สามารถทำได้ด้วย ( เอกสารหรือเหตุการณ์ ):

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

มีclassNameคุณสมบัติในจาวาสคริปต์เพื่อเปลี่ยนชื่อของคลาสขององค์ประกอบ HTML ได้ ค่าคลาสที่มีอยู่จะถูกแทนที่ด้วยค่าใหม่ที่คุณได้กำหนดไว้ใน className

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

เครดิต - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

คำถาม OP คือฉันจะเปลี่ยนคลาสขององค์ประกอบด้วย JavaScript ได้อย่างไร

เบราว์เซอร์สมัยใหม่ช่วยให้คุณทำเช่นนี้ได้ด้วย javascript หนึ่งบรรทัด :

document.getElementById('id').classList.replace('span1','span2')

classListแอตทริบิวต์ให้ DOMTokenList ซึ่งมีความหลากหลายของวิธีการ คุณสามารถดำเนินการเกี่ยวกับองค์ประกอบของ classList ใช้กิจวัตรง่ายๆเช่นเพิ่ม () , ลบ ()หรือแทนที่ () หรือรับคลาสที่ซับซ้อนมากและจัดการคลาสเช่นเดียวกับที่คุณทำวัตถุหรือแผนที่ด้วยคีย์ () , ค่า () , รายการ ()

คำตอบของ Peter Boughton เป็นคำตอบที่ยอดเยี่ยม แต่มันเก่าไปกว่าทศวรรษแล้ว เบราว์เซอร์ที่ทันสมัยทั้งหมดในขณะนี้รองรับ DOMTokenList - ดูที่https://caniuse.com/#search=classListและแม้กระทั่ง IE11 ก็รองรับวิธี DOMTokenList บางวิธี

ลอง

element.className='second'

function change(box) { box.className='second' }

.first  { width:  70px; height:  70px; background: #ff0                 }
.second { width: 150px; height: 150px; background: #f00; transition: 1s }

<div onclick="change(this)" class="first">Click me</div>

รหัสจาวาสคริปต์ทำงาน:

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

คุณสามารถดาวน์โหลดรหัสที่ใช้งานได้จากลิงค์นี้

นี่คือ jQuery code ที่ง่ายต่อการทำ

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

ที่นี่

• Class1 เป็นผู้ฟังสำหรับเหตุการณ์
• คลาส parent คือคลาสที่โฮสต์คลาสที่คุณต้องการเปลี่ยน
• Classtoremove เป็นคลาสเก่าที่คุณมี
• คลาสที่จะเพิ่มเป็นคลาสใหม่ที่คุณต้องการเพิ่ม
• 100 คือการหน่วงเวลาการหมดเวลาระหว่างที่เปลี่ยนคลาส

โชคดี.