0

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

2 回答 2

0

我使用这个函数(对于我没有 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;
}
于 2011-06-13T09:58:54.793 回答
0
> var state;
> 
> window.onload=function() {
> 
>   obj = document.getElementsByTagName('body')[0];
>   state = (state == null)? ' defaultText' : state;

第一次运行代码时,将我们声明为未定义,因此最好在声明时将其设置为null或将上面的内容更改为:

  state = state? ' defaultText' : 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 功能的帮助,请询问。

于 2011-06-13T12:17:02.820 回答