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

この時点で、body 要素のクラスのリストに「defaultText」が追加されます。ここでも先頭のスペースに問題がある可能性がありますが、これは堅牢な 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 に答える
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 に答える