如何将类名添加到Javascript字符串?

如何将类名添加到Javascript字符串?,javascript,classname,Javascript,Classname,我是一个JS新手,试图修改以下代码。看起来它正在添加样式属性。我想将类名“reveal”添加到这个字符串或下面。这种语法是什么样的?非常感谢你们的帮助,伙计们 inline = ( elem.domEl.getAttribute( 'style' ) ) ? elem.domEl.getAttribute( 'style' ) + '; visibility: visible; ' : 'visibility: visible; ' 最简单的方法就是修改属性。如果说“添加类”的意思是将类名

我是一个JS新手,试图修改以下代码。看起来它正在添加样式属性。我想将类名“reveal”添加到这个字符串或下面。这种语法是什么样的?非常感谢你们的帮助,伙计们

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

最简单的方法就是修改属性。如果说“添加类”的意思是将类名(字符串)推回元素,而不管当前的类名(字符串),那么这段代码将完成这项工作


elem.domEl.className=elem.domEl.className+''+

最简单的方法就是修改属性。如果说“添加类”的意思是将类名(字符串)推回元素,而不管当前的类名(字符串),那么这段代码将完成这项工作

elem.domEl.className=elem.domEl.className+'''+

您可以尝试以下方法:

inline = ( elem.domEl.getAttribute( 'class' ) ) ? elem.domEl.getAttribute( 'class' ) + ' classname ' : 'classname '
这也是可能的:

var cls = elem.domEl.className;
elem.domEl.className = cls ? cls + ' classname' : 'classname';
你可以试试这个:

inline = ( elem.domEl.getAttribute( 'class' ) ) ? elem.domEl.getAttribute( 'class' ) + ' classname ' : 'classname '
这也是可能的:

var cls = elem.domEl.className;
elem.domEl.className = cls ? cls + ' classname' : 'classname';
你需要写作

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

elem.domEl.className = "reveal";
这里的问题是classname不是样式属性,而是元素属性。

您需要编写

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

elem.domEl.className = "reveal";

这里的问题是classname不是一个样式属性,它是一个元素属性。

您可能希望执行以下操作:

inline = (elem.domEl.style.visibility == 'visible') ? 'hidden' : 'visible';
但是,如果您只想设置可见css,请按以下方式操作:

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

您可能希望执行以下操作:

inline = (elem.domEl.style.visibility == 'visible') ? 'hidden' : 'visible';
但是,如果您只想设置可见css,请按以下方式操作:

elem.domEl.style.visibility = 'visible';
使用:

elem.domEl.setAttribute(“类”、“揭示”)

使用:

elem.domEl.setAttribute(“类”、“揭示”)

(我猜)HTML可能如下所示:

<div class="some other">
然后你会得到

<div class="reveal">
如果仍要在过时的浏览器中运行代码,请尝试以下操作:

// 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
(我猜)HTML可能如下所示:

<div class="some other">
然后你会得到

<div class="reveal">
如果仍要在过时的浏览器中运行代码,请尝试以下操作:

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

这是一个三元条件-如果
style
属性存在,则指定style属性+
可见性:可见
,否则,只需返回
可见性:visible
。您不能向其中添加类。\n我想他说的是
elem.domE1
中的DOM元素,根据他提供的代码,它似乎存在。这是一个三元条件-如果
style
属性存在,请指定style属性+
可见性:可见
,否则,只需返回
可见性:visible
。您不能向其中添加类。\n我想他正在谈论
elem.domE1
中的DOM元素,根据他提供的代码,它似乎存在。这太棒了!非常感谢!有没有办法稍微延迟.classList函数?你说的稍微延迟是什么意思?我没有回答这个问题,你能描述一下它的用途吗?基本上这个函数是在增加可见性:visible和类同时向元素显示。我想在每个动作之间添加一些时间,使其动画化为可见,然后使用“显示属性”设置动画。然后您应该尝试不透明度。比如说,您的元素是一个
,在CSS中添加这些选择器
p{transition:opacity 500ms linear;opacity:0;}。display{opacity:1;}
然后切换类名
display
。有一个名为“transitionend”的事件,它在样式转换完成时被调度。您可以听到这样的事件:
elem.domEl.addEventListener('transitionend',函数(e){/*您想在这里做的事情*/})
。这太棒了!非常感谢!有没有办法稍微延迟.classList函数?你说的稍微延迟是什么意思?我没有回答这个问题,你能描述一下它的用途吗?基本上这个函数是在增加可见性:visible和类同时向元素显示。我想在每个动作之间添加一些时间,使其动画化为可见,然后使用“显示属性”设置动画。然后您应该尝试不透明度。比如说,您的元素是一个
,在CSS中添加这些选择器
p{transition:opacity 500ms linear;opacity:0;}。display{opacity:1;}
然后切换类名
display
。有一个名为“transitionend”的事件,它在样式转换完成时被调度。您可以听这样的事件:
elem.domEl.addEventListener('transitionend',函数(e){/*您想在这里做的事情*/})