0

jQueryのCSSドキュメントを読んだ後は、Javascript要素を直接取得し、プロパティを更新してCSSを操作するよりも利点があるようには見えません。私は何かが足りないのですか？

4

5 に答える 5

4

jQuerycssメソッドを使用する必要があります。これには多くの利点があります。

  • .css1回の呼び出しで複数のcssプロパティを設定できます。
  • 整数値を渡すことができ、自動的にpxに変換されます。
  • これは、多くのクロスブラウザーの問題を正常化します。たとえば.css('opacity', 0.8)、ユーザーがIEを使用しているかどうかをテストしたり、醜いアルファ回避策を適用したりすることなく、使用することができます。
  • 私は$('#foo').css('prop', 'value')より整理されて読みやすいと思います
    $('#foo')[0].style.prop = 'value';

言うまでもなく.css、メソッドの連鎖や要素配列の自動反復など、他のjQueryの機能を提供します。

于 2012-06-25T03:33:42.697 に答える
2

jQueryを使用すると、DOMの検索がはるかに簡単になります。また、スタイルを操作するために追加の関数の名前を覚えておく必要がないため、jQueryのCSS関数が気に入っています。.css（）を標準のCSSプロパティおよび値と組み合わせて使用​​できます。

于 2012-06-25T03:25:14.747 に答える
1

基本のJS実装に比べてかなりの数の利点があります。ここに、私のお気に入りがあります。

  • セレクター$（'a'）。css（....）を使用すると、そのCSSが「a」に一致するすべてのセレクターに適用されます。それ以外の場合はループを使用する必要があり、それ以外の場合はより多くのコードが作成されます
  • オブジェクト{}を渡すことができ、その方法でスタイルを追加します
  • 値を計算する関数を実行できます（上記のループのように）。

私の意見では、これらすべての結果、コードが少しクリーンで簡潔になります。

于 2012-06-25T03:27:53.553 に答える
1

1つの利点は、設定するスタイルを設定する行為から分離することです。たとえば、JavaScriptコードでスタイルを動的に構築する場合があります。これにより、スタイルを適用するコードを微調整することなく、そのロジックを微調整できます。

または、「構成可能な」スクリプトを作成し、すべてのスタイルをヘッダー変数に入れて、構成可能なオプションのセクションに分割したい場合もあります。（独自のjQueryプラグインの作成には、多くの場合これが含まれます。）ファイルの「この行の下に変更しない」セクションにスタイルを適用するコードを埋めて、ユーザーが構成できる設定可能なプロパティを残すことができます。

于 2012-06-25T03:28:41.113 に答える
1

jQuery$.fn.cssは実際には何もしません。つまり、ソース関数自体は次のとおりです。

css: function( elem, name, extra ) {
    var ret, hooks;

    // Make sure that we're working with the right name
    name = jQuery.camelCase( name );
    hooks = jQuery.cssHooks[ name ];
    name = jQuery.cssProps[ name ] || name;

    // cssFloat needs a special treatment
    if ( name === "cssFloat" ) {
        name = "float";
    }

    // If a hook was provided get the computed value from there
    if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) {
        return ret;

    // Otherwise, if a way to get the computed value exists, use that
    } else if ( curCSS ) {
        return curCSS( elem, name );
    }
}

ああ、私が「何もしない」と言ったとき、私は実際には、名前を正規化してhyphen-notation代わりに使用できるようにしcamelCase、ブラウザ間の互換性をサポートし、適切な値を返す前にopacityプロパティ名を正規化することを意味したと思います。float

これは関数のアクセサーバージョンにすぎないという事実についても理解したと思います。ミューテイターメソッドは次のとおりです。

style: function( elem, name, value, extra ) {
    // Don't set styles on text and comment nodes
    if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
        return;
    }

    // Make sure that we're working with the right name
    var ret, type, origName = jQuery.camelCase( name ),
        style = elem.style, hooks = jQuery.cssHooks[ origName ];

    name = jQuery.cssProps[ origName ] || origName;

    // Check if we're setting a value
    if ( value !== undefined ) {
        type = typeof value;

        // convert relative number strings (+= or -=) to relative numbers. #7345
        if ( type === "string" && (ret = rrelNum.exec( value )) ) {
            value = ( +( ret[1] + 1) * +ret[2] ) + parseFloat( jQuery.css( elem, name ) );
            // Fixes bug #9237
            type = "number";
        }

        // Make sure that NaN and null values aren't set. See: #7116
        if ( value == null || type === "number" && isNaN( value ) ) {
            return;
        }

        // If a number was passed in, add 'px' to the (except for certain CSS properties)
        if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
            value += "px";
        }

        // If a hook was provided, use that value, otherwise just set the specified value
        if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) {
            // Wrapped to prevent IE from throwing errors when 'invalid' values are provided
            // Fixes bug #5509
            try {
                style[ name ] = value;
            } catch(e) {}
        }

    } else {
        // If a hook was provided get the non-computed value from there
        if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
            return ret;
        }

        // Otherwise just get the value from the style object
        return style[ name ];
    }
}

したがって、すべての利点は、専用のjQuery開発者がすでにすべてを1つの関数に適切に正規化しているため、HTML要素を動的にスタイル設定しようとするときにクロスブラウザーの問題を心配する必要がないことです。

jQueryバージョン1.7.2のコード

于 2012-06-25T03:40:57.233 に答える