将className添加到body事件上多次出现的mouseEvent吗？

问题描述

| 我在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>

解决方法

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

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

  state = state? \' defaultText\' : state;

假设第一次运行该表达式，其结果将为true，然后将状态设置为\' 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函数的帮助，请询问。 , 我使用此功能（适用于我没有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;
}

body mouseevent 事件事件事件出现出现加到多次