使用JavaScript更改元素的类

如何使用JavaScript更改一个HTML元素的类以响应onClick事件？

---

用于改变类的现代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');

不幸的是，这些在v10之前的Internet Explorer中不起作用，尽管可以从该页面上获得对IE8和IE9的支持。 但是，它越来越受到支持。

简单的跨浏览器解决方案

选择元素的标准JavaScript方法是使用document.getElementById("Id") ，这是以下示例所使用的 - 您当然可以通过其他方式获取元素，并且在正确的情况下可以简单地使用this - 但是，对此进行详细说明超出了答案的范围。

要更改元素的所有类别：

要用一个或多个新类替换所有现有类，请设置className属性：

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

（您可以使用空格分隔的列表来应用多个类。）

为一个元素添加一个额外的类：

要向某个元素添加一个类，而不移除/影响现有值，请添加一个空格和新的类名，如下所示：

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

从元素中移除一个类：

要将单个类移除到某个元素，而不影响其他潜在的类，则需要进行简单的正则表达式替换：

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

这个正则表达式的解释如下：

(?:^|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标志会根据需要告诉替换重复。

要检查一个类是否已经应用到元素：

上面用于移除类的相同正则表达式也可以用来检查某个特定类是否存在：

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

将这些操作分配给onclick事件：

虽然可以直接在HTML事件属性中编写JavaScript（如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完成加载之后执行该函数的内容 - 如果没有这个，调用JavaScript代码时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, ' ');
    }
}

所以，例如，如果我想要点击添加一些类，我可以使用这个按钮：

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

链接地址: http://www.djcxy.com/p/627.html

上一篇: Change an element's class with JavaScript

下一篇: Should I use the datetime or timestamp data type in MySQL?