javascript - 如何获取像 jQuery 这样的默认 CSS 属性？

Question

晚上好!

对于我的基本 JavaScript 库，我有点难以理解如何获取和设置绝对默认 CSS 属性——就像在 jQuery 中一样。

例如，在查看 jQuery 源代码后，我可以看到对于 show()、hide() 和 toggle() 方法是有一个函数，showHide()(底部的片段)，它访问一个名为“._data”的方法来检索元素的“olddisplay”。

我只知道 window.getComputedStyle，它会在元素应用样式时发生变化。如果

的原始样式是“display:none”，那么当“display:none”是 CSS 最古老的记录时，如何获得旧显示？

“级联规则”是那些原始样式吗？

在截取的代码中还有一个名为 css_defaultDisplay() 的函数，它与 iframe 有关系吗？有没有更简单的方法来完成这一切？

谢谢大家的回复。

编辑:难道我不能只从我想要获取其样式并获取 IT 的计算样式的元素的标签名称中创建一个新元素吗？

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;

最佳答案

可能不是一个完整的答案，特别是因为您要求使用比使用 IFRAME 更简单的方法，但我只是认为这很有趣，为什么 jquery 使用 iframe 来获取默认 css。这是因为 iframe 中的元素会忽略您网站的 css，无论来源如何或完全缺少 src...

<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 是开源的。我怀疑他们会介意这个问题。

关于javascript - 如何获取像 jQuery 这样的默认 CSS 属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17626433/

Answer 1

可能不是一个完整的答案，特别是因为您要求使用比使用 IFRAME 更简单的方法，但我只是认为这很有趣，为什么 jquery 使用 iframe 来获取默认 css。这是因为 iframe 中的元素会忽略您网站的 css，无论来源如何或完全缺少 src...

<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 是开源的。我怀疑他们会介意这个问题。