Question

晚间！

对于我的基本JavaScript库，我有点难过，看看如何获取和设置绝对DEFAULT CSS属性 - 就像在jQuery中一样。

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

我只知道 window.getComputedStyle ，它在元素应用了样式时会发生变化。如果＆lt; div＆gt;的原始样式是“display：none”，当“display：none”是最古老的CSS记录时，如何获得旧显示？

任何机会“级联规则”是那些原始风格吗？

代码剪辑中还有一个名为 css_defaultDisplay（）的函数，它与iframe有关吗？有没有更简单的方法来完成所有这些？

感谢所有人的回复。

编辑：我不能只从我希望获得样式的元素的tagName创建一个新元素并获得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;

}

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 / sandbox可能就是你想要的。

但最终，您可能希望通过电子邮件向Jquery创建者发送电子邮件，以了解他们如何解决此问题。 Jquery是开源的。我怀疑他们会介意这个问题。

Answer 2

我认为你要做的是在html元素上设置任意数据。当它即将改变时，你想要访问元素的数据以找到以前的值。如果是这种情况，那么你可以看看这个

How to store arbitrary data for some HTML tags

这是一篇文章，将为您提供有关此内容的更多信息

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

如何获得像jQuery这样的默认CSS属性？

2 个答案: