8

両方の間：

Javascript

function setCss(object, css) {
    return (object.className = css);
}
function getCss(object, css) {
    return object.className;
}

または

function getCss2(object)
{   
    if (object.getAttribute("className")) {
        return object.getAttribute("className");
    }
    return object.getAttribute("class");
}


function setCss2(object, cssclass)
{        
    if (object.getAttribute("className")) {
        return object.setAttribute("className",cssclass);
    }
    object.setAttribute("class",cssclass);
}

HTML

<a href="#" onClick="setCss(this, 'newclass')" />
<a href="#" class="something" onClick="alert(getCss(this))" />
<a href="#" onClick="setCss2(this, 'newclass')" />
<a href="#" class="something" onClick="alert(getCss2(this))" />

どちらのバージョンも IE8、FF4、Chrome、Opera、Safari で動作するようです。( jsFiddle (改善) デモ)

ベスト ユース プラクティスはどれで、その理由はどれですか? どちらのバージョンでも問題が発生したことはありますか?

4

4 に答える 4

10

object.getAttribute("className");実際には機能しません。

違いは、HTML コードに記述されているとおりにHTML 属性getAttributeの値を取得することです (いくつかの例外があります)。

これらの値は、ほとんどがDOM 要素のプロパティの初期値でもあります。ただし、それらにアクセスすると、前処理/後処理のために異なる値が生成される可能性があります。

たとえば、<a>要素el.hrefがある場合、 は完全な (絶対) URL を提供し、一方el.getAttribute('href')は HTML に記述されたとおりの URL を提供します。

ほとんどの場合、要素の現在の状態を反映する DOM 要素のプロパティにアクセスする必要があります。

于 2011-07-04T18:34:48.393 に答える
6

getAttribute("class")さまざまな種類のドキュメントで使用できるため、より普遍的です。XML ドキュメントでは、最も重要です。SVG を含む。

element.classNameHTML でのみ機能します。これは、DOM レベル 2 HTML 仕様で説明されています。

于 2011-07-04T18:38:38.880 に答える
1

最初のものを使用します。

ソーターです。getAttribute をサポートしていない非常に古いブラウザであっても、すべてのブラウザで動作します。おそらくそれも速いでしょう。

ただし、これには関数を使用しないでください。this.className と this.className='newClass' を使用してください。これには、関数を使用するのはやり過ぎです。

于 2011-07-04T18:37:07.697 に答える