Добавление имени класса в тело на mouseevent происходит несколько раз?

StackOverflow https://stackoverflow.com/questions/6328904

Вопрос

Я добавляю дополнительное имя класса к тегу body, однако имя класса добавляется несколько раз...некоторая помощь о том, как избежать этого, была бы очень кстати!

Спасибо

<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;

При первом запуске кода, состояние us не определено, поэтому было бы лучше либо установить его в ноль при объявлении этого или измените приведенное выше на:

  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;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top