Question

我是一个试图改变以下代码的JS新手。它看起来像是在添加样式属性。我想添加班级名称＆＃34;显示＆＃34;到这个字符串或以下。那句法是什么样的？非常感谢你的帮助，伙计们！

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

Answer 1

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

<div class="some other">

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

elem.domEl.className = 'reveal';

然后你会得到

<div class="reveal">

班级一些和其他带来的所有款式都不见了！你绝对不希望这样，对吧？此外，您不需要重复的类名，如

<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

Answer 2

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

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

Answer 3

使用：

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

Answer 4

你可以试试这个：

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

这也是可能的：

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

Answer 5

你需要写

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

elem.domEl.className = "reveal";

这里的catch是classname不是style属性，它是一个元素属性。

Answer 6

可能是你想要做的如下：

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

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

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

如何为Javascript字符串添加类名？

6 个答案:

所以，这是解决方案：