如何将类名添加到 Javascript 字符串？答案

【问题标题】：How do I add a class name to Javascript string?如何将类名添加到 Javascript 字符串？
【发布时间】：2015-01-25 15:11:42
【问题描述】：

我是一个试图改变以下代码的 JS 新手。看起来它正在添加样式属性。我想将类名“reveal”添加到此字符串或以下。该语法会是什么样子？非常感谢你们的帮助，伙计们！

 inline = ( elem.domEl.getAttribute( 'style' ) ) ? elem.domEl.getAttribute( 'style' ) + 
'; visibility: visible; ' : 'visibility: visible; '

【问题讨论】：

这是一个三元条件——如果style属性存在，则指定样式属性+visibility: visible;，否则，只返回visibility:visible。您不能为此添加课程。\
我认为他在谈论elem.domE1 的DOM 元素，根据他提供的代码似乎存在。

标签： javascript classname

【解决方案1】：

（我猜）HTML 可能如下所示：

<div class="some other">

在这种情况下，如果你这样做

elem.domEl.className = 'reveal';

然后你会得到

<div class="reveal">

some和other类带来的所有样式都不见了！你绝对不想这样，对吧？你也不想要重复的类名，比如

<div class="reveal reveal">

那么，以下是解决方案：

最好的方法是使用 HTML5 API classList:

elem.domEl.classList.contains('reveal') // Check whether element has a classname
elem.domEl.classList.add('reveal') // Add a classname
elem.domEl.classList.remove('reveal') // Remove a classname
elem.domEl.classList.toggle('reveal') // Toggle a classname

如果您仍想在过时的浏览器中运行代码，请尝试以下方法：

// Check whether element has a classname
function hasClass(ele, cls) {
    var clsChecker = new RegExp("\\b" + cls + "\\b");
    return clsChecker.test(ele.className);
}
// Add a classname
function addClass(ele, cls) {
    var clsChecker = new RegExp("\\b" + cls + "\\b");
    if(clsChecker.test(ele.className)) {
        // ele already has the className, don't need to do anything
        return;
    }
    ele.className += (' '+ cls);
}

// Remove a classname
function removeClass(ele, cls) {
    var clsChecker = new RegExp("\\b" + cls + "\\b");
    if(clsChecker.test(ele.className)) {
        // ele does have the className, remove them all (in case repeated)
        ele.className.split(clsChecker).join('');
    }
}

// Toggle a classname
function toggleClass(ele, cls) {
    var clsChecker = new RegExp("\\b" + cls + "\\b");
    if(clsChecker.test(ele.className)) {
        // ele does have the className, remove them all (in case repeated)
        ele.className.split(clsChecker).join('');
    } else {
        // ele doesn't have the classname, add it
        ele.className += (' '+ cls);
    }
}

// Usages
hasClass(elem.domEl, 'reveal') // Check whether element has a classname
addClass(elem.domEl, 'reveal') // Add a classname
removeClass(elem.domEl, 'reveal') // Remove a classname
toggleClass(elem.domEl, 'reveal') // Toggle a classname

【讨论】：

这太棒了！非常感谢！有没有办法稍微延迟 .classList 函数？
稍微延迟是什么意思？我没听明白，你能描述一下目的吗？
这个函数基本上是同时添加visibility:visible 和class 显示给元素。我想在每个动作之间添加一些时间，使其动画可见，然后使用显示属性进行动画。
那你应该试试不透明度。说，你的元素是<p>，在CSS中添加这些选择器p {transition: opacity 500ms linear; opacity: 0;} .reveal {opacity: 1;}然后切换类名reveal。
有一个名为 'transitionend' 的事件，它在样式转换完成时调度。您可以像这样收听事件：elem.domEl.addEventListener('transitionend', function(e) { /* things you want to do here */ }).

【解决方案2】：

最简单的方法是修改Element.className 属性。如果说“添加类”是指将类名（字符串）推回元素，而不管当前的类名（字符串）如何，那么这段代码就可以完成这项工作。

elem.domEl.className = elem.domEl.className + ' ' + <YOUR_STRING_HERE>

【讨论】：

【解决方案3】：

用途：

elem.domEl.setAttribute("class", "reveal");

【讨论】：

【解决方案4】：

你需要写

inline = ( elem.domEl.getAttribute( 'style' ) ) ? elem.domEl.getAttribute( 'style' ) + '; visibility: visible; ' : 'visibility: visible; '

elem.domEl.className = "reveal";

这里要注意的是 classname 不是样式属性，它是元素属性。

【讨论】：

【解决方案5】：

也许你想像下面这样：

inline = (elem.domEl.style.visibility == 'visible') ? 'hidden' : 'visible';

但是如果你只是想设置可见的 css 那就这样做吧：

elem.domEl.style.visibility = 'visible';

【讨论】：

【解决方案6】：

你可以试试这个：

inline = ( elem.domEl.getAttribute( 'class' ) ) ? elem.domEl.getAttribute( 'class' ) + ' classname ' : 'classname '

这也是可能的：

var cls = elem.domEl.className;
elem.domEl.className = cls ? cls + ' classname' : 'classname';

【讨论】：