2

晚上！

对于我的基本 JavaScript 库，我对如何获取和设置绝对的 DEFAULT CSS 属性感到有些困惑——就像在 jQuery 中一样。

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

我只知道window.getComputedStyle，它会在元素应用了样式时发生变化。如果 <div> 的原始样式是“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;

}

4

2 回答 2

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

于 2013-07-13T03:45:40.653 回答
0

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

如何为某些 HTML 标签存储任意数据

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

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

于 2013-07-13T02:43:03.527 回答