如何通过javascript函数将css类添加到<div>答案

【问题标题】：how to add a css class to a <div> via javascript function如何通过javascript函数将css类添加到<div>
【发布时间】：2013-04-07 22:06:15
【问题描述】：

我对网络编程和 javascript 比较陌生。我习惯于在非 Web 项目中使用 as3 或 java。

我编写了一些 javascript 来显示和隐藏网站上的 div。我希望显示与单击的菜单项对应的 div 并隐藏所有其他项。

但是，代码不起作用。我已经尝试了几件事，但我显然对 javascript 不够熟悉以使其工作。

基本上我想在我希望显示的 div 中添加一个 .visibleContent 类，以便 css3 过渡使其淡入，当该类被移除时，css3 过渡将使其淡出。

谁能向我解释我做错了什么？我什至以正确的方式接近这个？我知道 Jquery，但我认为仅仅为此导入该库是矫枉过正的。我想使用 javascript 本身。

我的 html 中的链接和 div：

<li><a href="javascript:;" onClick='navClick("page1");'>page 1 button</a></li>
<li><a href="javascript:;" onClick='navClick("page2");'>page 2 button</a></li>

<div id="pages">
    <div id="page1">
        <p> page 1 content </p>
    </div>

    <div id="page2">
        <p> page 2 content </p>
    </div>
</div>

这里是 javascript，注意我已经从这里复制了 hasClass、addClass 和 removeClass 函数：dynamically add/remove style in javascript

var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');

var pageArray = new Array;
pageArray.push(page1);
pageArray.push(page2);


function hasClass(element,class) {
    return element.className.match(new RegExp('(\\s|^)'+class+'(\\s|$)'));
}

function addClass(element,class) {
    if (!this.hasClass(element,class)) element.className += " "+class;
}

function removeClass(ele,cls) {
    if (hasClass(element,class)) {
        var reg = new RegExp('(\\s|^)'+class+'(\\s|$)');
        element.className=element.className.replace(reg,' ');
    }
}

function navClick(id) {
    var e = document.getElementById(id);
    for (i = 0; i < pageArray.length; i++) {
        if (pageArray[i] == e) {
            if (!hasClass(pageArray[i], 'visibleContent')) {
                addClass(pageArray[i], 'visibleContent');
            }
        } else {
            if (hasClass(pageArray[i], 'visibleContent')) {
                removeClass(pageArray[i], 'visibleContent');    
            }
        }
    }
}

这里是相关的css：

 #pages div {
        opacity: 0;
        position: fixed;
        width:55%;
        height: 65%;
        top: 10%;
        left: 100%;
        background: #00FF00;
        animation fadeOutAnimation 1s linear 1; 
    }

    .visibleContent {
        opacity: 1;
        position: fixed;
        width: 55%;
        height: 65%;
        top:10%;
        left:40%;
        background: #00FF00;
        animation: fadeInAnimation 1s linear 1;
    }

当我直接在 html 标记中将 .visibleContent 类添加到 div 时，内容会按原样显示，当我不将类添加到 div 时，它确实是不可见的。当我使用我的 navClick 函数尝试动态添加类时，没有任何反应...... 怎么了？

【问题讨论】：

我想我会是第一个说的：为什么不用jQuery？
你可以在你的网站/项目中使用 JQuery 吗？
stackoverflow.com/questions/7388626/…
当他已经解释了为什么他不想使用 jQuery 时，你为什么还要问他是否不能使用 jQuery？此外，人们应该只在他们已经知道如何自己制作东西时才使用 jQuery，否则人们仍然是新手。
Virus721，除了为这么小的功能添加一个庞大的库之外，我完全同意你的观点。在熟悉编程语言本身之前，我不喜欢使用库，因为我希望能够编写自己的代码，而不是被教程、示例和库所束缚。

标签： javascript html web

【解决方案1】：

如果您真的想在原生 javascript 中执行此操作，您需要更好的查找机制来查找 DOM 条目 'page1' 和 'page2'。

这里有一些我经常制作和使用的糖果，其中loop 和pool 通过元素的对象o 前进和后退。函数 sel() 返回一个包含 o 中所有元素的 Array()，属性为 atr 和给定的 value。所以你也看到loop 和pool 在这个函数中是如何工作的。我写这个是因为我还需要一些原生 javascript 来加速和缩短我在一个更大的项目中编写的一些代码。

var dc = document;

function byid() {
    return dc.getElementById(arguments[0]) || null;
}

function byclass() {
    var a = arguments.length == 2 ? arguments[1] : dc.all;
    return sel(a, "class", arguments[0]) || null;
}

function bytag() {
    return dc.getElementsByTagName(arguments[0], arguments[1]) || null;
}

function byname() {
    return dc.getElementsByName(arguments[0])[0] || null;
}

function taglength() {
    return bytag(arguments[0], arguments[1]).length || null;
}

function loop(o, f) {
    var l = o.length;
    for (var i = 0; l > i; i++) f(o[i]);
} //forward


function pool(o, f) {
    var l = o.length;
    for (var i = l; i--;) f(o[i]);
} //backward


function sel(o, atr, val) {
    var r = [];
    var e = 0;
    pool(o, function(o) {
        if (o.getAttribute(atr) === val) {
            r[e++] = o;
        }
    });
    return r;
}

【讨论】：

loop(o=objectlist,f=作用于每个对象的函数); pool.. 相同，但从 o 中的最后一个元素倒退到第一个元素

【解决方案2】：

这是在 Firefox (Linux) 上运行的稍作修改的代码。请记住，并非所有浏览器（如 Chrome 等）都接受“纯”CSS3，可能需要额外的 CSS 代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="icon" href="favicon1.ico" type="image/x-icon">
<style type="text/css">

    .initial {
        opacity: 0;
    }

    .unvisibleContent {
        opacity: 0;
        /*position: fixed;*/
        width:55%;
        height: 65%;
        top: 10%;
        left: 100%;
        background: #00FF00;
        animation: fadeOutAnimation 1s linear 1;
        animation-iteration-count: 1;
    }

    @keyframes fadeOutAnimation
    {
        from {opacity:1;}
        to {opacity:0;}
    }

    .visibleContent {
         opacity: 1;
        /*position: fixed;*/
        width: 55%;
        height: 65%;
        top:10%;
        left:40%;
        background: #00FF00;
        animation: fadeInAnimation 1s linear 1;
        animation-iteration-count: 1;
    }
    @keyframes fadeInAnimation
    {
        from {opacity:0;}
        to {opacity:1;}
    }
</style>

</head>
<body>
<ul>
    <li><a href="javascript:;" onClick='navClick("page1");'>page 1 button</a></li>
    <li><a href="javascript:;" onClick='navClick("page2");'>page 2 button</a></li>
</ul>
<div id="pages">
    <div id="page1" class="initial">
    <p> page 1 content </p>
    </div>

    <div id="page2" class="initial">
    <p> page 2 content </p>
    </div>
</div>
<script type="text/javascript">
    var page1 = document.getElementById('page1');
    var page2 = document.getElementById('page2');

    var pageArray = new Array();
    pageArray.push(page1);
    pageArray.push(page2);

    function hasClass(element,cls) {
    return element.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }

    function addClass(element,cls) {
    element.className += (" "+cls);
    }

    function removeClass(ele) {
    ele.className="";
    }

    function navClick(id) {
    var e = document.getElementById(id);
    for (var i = 0; i < pageArray.length; i++) {
        if (pageArray[i] == e) {
        if (!hasClass(e, 'visibleContent')) {
            removeClass(e);
            addClass(e, 'visibleContent');
        }
        } else
        if (hasClass(pageArray[i], 'visibleContent')) {
            removeClass(pageArray[i]);
            addClass(pageArray[i], 'unvisibleContent');
        }
    }
    }
</script>
</body>
</html>

【讨论】：

你先生，摇滚！谢谢你:)
不要使用保留关键字class。就是这样！
感谢 codelio，Quentin 在下面的回答中向我指出了这一点。将“class”更改为“cls”后，它仍然没有运行。上面 Micheal Besteck 的代码修复了它。谁能澄清我如何将帖子标记为已解决？我似乎忘记了如何..

【解决方案3】：

检查浏览器的错误控制台以获取错误消息。您有语法错误。（以下是从 Firebug 复制/粘贴的）。

function hasClass(element, class) {
SyntaxError: class is a reserved identifier

JSLint 和 JSHint 也会收到此消息。

【讨论】：

JavaScript 什么时候有了类？ ://
@Virus721 — 没有。该关键字保留用于（可能）未来可能的功能。
是的，所以他们意识到，就像 PHP 一样，这种语言是纯粹的废话，并想尝试将其变成经典的继承/类语言。等不及了。
谢谢，我已经把'class'改成了'cls'，但还是不行。
您的 pageArray 查找机制不起作用，一直是 null。使用cls.test(element.className)，hasClass 正则表达式也可能更容易，这将检查 cls 是否在 className 内并返回 true 或 false

【解决方案4】：

如果你不想使用 jQuery，你仍然可以使用：http://james.padolsey.com/jquery/#v=1.7.2&fn=hasClass 我知道您不想仅仅为了这么简单的事情而包含 10k 行 js 代码，但是如果您的网站中有其他 javascript 内容，请不要犹豫。它不仅更干净，而且更安全，因为它的代码肯定很好，更短，并且任何了解 jQuery 的人都可以阅读。

【讨论】：

谢谢，但我真的很想用我自己的代码让它工作。了解如何使用 javascript 很重要，因为我打算做更多的 Web 开发。通常我会学习一门新语言，但这个网站需要尽快上线，所以我寻求帮助。
实际上，最好的学习方法是尝试理解在一段精心创建的代码中所做的选择，您可以在那里找到。