Question

我在body标签中添加了一个额外的className，但是className被多次添加...一些关于如何避免这种情况的帮助非常受欢迎！

由于

<html>
<head>

<style type="text/css">
.defaultText {
font-size:100%;
}
.myNewClass {
font-size:150%;
color:red;
}
</style>

<script type="text/javascript">
<!--

var state;

window.onload=function() {

obj=document.getElementsByTagName('body')[0];
state=(state==null)?' defaultText':state;
obj.className+=state;

document.getElementById('addClass').onclick=function() {
obj.className+=(obj.className==' myNewClass')?' defaultText':' myNewClass';
state=obj.className;
}
}

-->
</script>

</head>

<body class="thisClassMustStay">

<div>My text here</div><br />
<a href='#' id="addClass">toggle class</a></div>

</body>
</html>

Answer 1

我使用此功能（对于我没有jQuery的网站）。

function addClass(element, className)
{
    // Split the classes
    var classes = element.className.split(' ');
    // Remove class if it exists (to force the added class to be added at the end).
    index = classes.indexOf(className);
    if (index > -1)
    {
        classes.splice(index, 1);
    }
    // Add class.
    classes.push(className);
    element.className = classes.join(' ');
}

另一个解决方案是保持全局记住，如果你已经添加了类，或者写一个函数来检查它：

function hasClass(element, className)
{
    var classes = element.className.split(' ');
    index = classes.indexOf(className);
    return index > -1;
}

Answer 2

> var state;
> 
> window.onload=function() {
> 
>   obj = document.getElementsByTagName('body')[0];
>   state = (state == null)? ' defaultText' : state;

第一次运行代码时， state 我们未定义，所以最好在声明它时将其设置为 null 或将上面的内容更改为：

  state = state? ' defaultText' : state;

鉴于第一次运行表达式将评估为true，然后 state 将设置为' defaultText'。请注意，字符串的开头有一个空格。在某些浏览器中，此空间将被删除，而在其他浏览器中，它将被保留，因此更好地将其删除。

>   obj.className += state;

此时，'defaultText'将被添加到body元素的类列表中。同样，前导空格可能存在问题，最好由强大的hasClass，addClass和removeClass函数处理（它们并不是特别难以编写）。

> 
>   document.getElementById('addClass').onclick = function() {
>     obj.className += (obj.className == ' myNewClass')? ' defaultText' :
>                                                        ' myNewClass';

使用上面建议的功能，可能是：

  if (hasClassname(obj, 'myNewClass')) {
    addClassname(obj, 'defaultText') ;
  } else {
    addClassname(obj, 'myNewClass') ;
  }

state = obj.className;

} }

如果您需要有关has / add / removeClassname函数的帮助，请询问。

在多次出现鼠标事件时将className添加到body？

2 个答案: