如何解决将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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。