如何使用JavaScript更改元素的类？

如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件？

当前回答

JavaScript中有一个属性className，用于更改HTML元素类的名称。现有的类值将替换为您在className中分配的新类值。

<!DOCTYPE html>
<html>
<head>
<title>How can I change the 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>

Credit-如何在JavaScript中更改HTML元素的类名

2020-03-20 12:25:24

其他回答

在我的一个不使用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会更好。

2011-05-28 07:32:53

JavaScript中有一个属性className，用于更改HTML元素类的名称。现有的类值将替换为您在className中分配的新类值。

<!DOCTYPE html>
<html>
<head>
<title>How can I change the 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>

Credit-如何在JavaScript中更改HTML元素的类名

2020-03-20 12:25:24

这里有一个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。

也可以在这里看到动态创建新类的答案。

2015-10-28 07:00:21

这对我很有用：

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

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

2011-12-08 09:36:57

对之前的正则表达式进行了一些小注释和调整：

如果类列表不止一次包含类名，则需要全局执行该操作。而且，您可能希望从类列表的末尾去掉空格，并将多个空格转换为一个空格，以防止出现空格。如果只有使用类名的代码使用下面的正则表达式并在添加名称之前删除名称，那么这些都不会是问题。好吧，谁知道谁可能在篡改班级名单。

这个正则表达式是不区分大小写的，所以在不考虑类名中的大小写的浏览器上使用代码之前，可能会出现类名中的错误。

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

2012-05-02 04:59:17

如何使用JavaScript更改元素的类？

推荐文章

最新文章

标签