2

夜！

私の基本的な JavaScript ライブラリについては、jQuery のように、絶対的な DEFAULT CSS プロパティを取得および設定する方法を見て、ちょっと困惑しました。

たとえば、jQuery ソースを見ると、show()、hide()、およびtoggle()メソッドについて、メソッドにアクセスする関数showHide() (下部のスニペット) があることがわかります。 "._data" を呼び出して、要素の "olddisplay" を取得します。

要素にスタイルが適用されると変化するwindow.getComputedStyleしか知りません。また、<div> の元のスタイルが「display:none」だった場合、「display:none」が CSS の最も古いレコードである場合、どうすれば古い表示を取得できますか?

「カスケード ルール」はもしかしてそれらの元のスタイルですか?

iframe と関係がある css_defaultDisplay()と呼ばれる、切り取られたコードにも関数がありますか? これをすべて行う簡単な方法はありますか？

返信ありがとうございます。

編集:スタイルを取得してITの計算スタイルを取得したい要素のtagNameから新しい要素を作成できませんでしたか?

jQuery 1.10.2 ソースからのコード スニペット:

function showHide( elements, show ) {
var display, elem, hidden,
    values = [],
    index = 0,
    length = elements.length;

for ( ; index < length; index++ ) {
    elem = elements[ index ];
    if ( !elem.style ) {
        continue;
    }

    values[ index ] = jQuery._data( elem, "olddisplay" );
    display = elem.style.display;
    if ( show ) {
        // Reset the inline display of this element to learn if it is
        // being hidden by cascaded rules or not
        if ( !values[ index ] && display === "none" ) {
            elem.style.display = "";
        }

        // Set elements which have been overridden with display: none
        // in a stylesheet to whatever the default browser style is
        // for such an element
        if ( elem.style.display === "" && isHidden( elem ) ) {
            values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
        }
    } else {

        if ( !values[ index ] ) {
            hidden = isHidden( elem );

            if ( display && display !== "none" || !hidden ) {
                jQuery._data( elem, "olddisplay", hidden ? display : jQuery.css( elem, "display" ) );
            }
        }
    }
}

// Set the display of most of the elements in a second loop
// to avoid the constant reflow
for ( index = 0; index < length; index++ ) {
    elem = elements[ index ];
    if ( !elem.style ) {
        continue;
    }
    if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
        elem.style.display = show ? values[ index ] || "" : "none";
    }
}

return elements;

}

4

2 に答える 2

1

特にIFRAMEを使用する以外の簡単な方法を求めたので、おそらく完全な答えではありませんが、jqueryがiframeを使用してデフォルトのcssを取得する理由は興味深いと思いました。これは、iframe 内の要素が、ソースまたは src の完全な欠如に関係なく、サイトの css を無視するためです...

<script src="jquery-1.10.2.js" type="text/javascript"></script>

<style type="text/css">

    div {
        background-color: black;
    }

</style>

<script type="text/javascript">

    $( document ).ready( function() {
        alert( $("#parentTest").css( "background-color" ) ); // rgb(0,0,0)
        $( '#iframeTest' ).ready( function() {
            var iframeDivTest = $("#iframeTest").contents().find( "body" ).html( '<div></div>' );
            alert( iframeDivTest.css( "background-color" ) ); // transparent
        });
    });

</script>

<div id="parentTest">???</div>

<iframe id="iframeTest"></iframe>

したがって、スタイル シートから干渉されないデフォルトが必要な場合は、javascript を再生するためのダミーでソースのない非表示の IFRAME/サンドボックスを作成するのがおそらく最善の方法です。

ただし、最終的には、Jquery の作成者に電子メールを送信して、この問題をどのように解決したかについて意見を求めることをお勧めします。Jquery はオープンソースです。彼らがその質問を気にするかどうかは疑わしい.

于 2013-07-13T03:45:40.653 に答える
0

あなたがやろうとしているのは、html要素に任意のデータを設定することだと思います。変更しようとしているときは、要素のデータにアクセスして前の値を見つけたいと思います。その場合は、これを見てください。

一部の HTML タグの任意のデータを保存する方法

これについての詳細情報を提供する記事は次のとおりです。

http://james.padolsey.com/javascript/element-datastorage/

于 2013-07-13T02:43:03.527 に答える