Javascript 如何获得jQuery之类的默认CSS属性？

晚上好

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

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

我只知道window.getComputedStyle，当元素应用了样式时，它会发生变化。如果a的原始样式是“display:none”，那么当“display:none”是CSS最古老的记录时，如何获得旧的显示

“层叠规则”是那些原创风格吗

代码中还有一个名为“css\u defaultDisplay（）的函数，它与iframe有关？有没有更简单的方法来完成这一切

谢谢大家的回复

编辑：我能不能从要获取样式的元素的标记名中创建一个新元素并获取其计算样式

来自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;

函数显示隐藏（元素，显示）{
变量显示、元素、隐藏、，
值=[]，
指数=0，
长度=元素长度；
对于（；索引<长度；索引++）{
elem=元素[索引]；
如果（！elem.style）{
继续；
}
值[索引]=jQuery.\u数据（elem，“olddisplay”）；
显示=elem.style.display；
如果（显示）{
//重置此元素的内联显示以了解其是否为
//是否被级联规则隐藏
如果（！values[index]&&display==“none”）{
elem.style.display=“”；
}
//设置已被显示覆盖的元素：无
//在样式表中设置为默认浏览器样式
//对于这样一个元素
if（elem.style.display==“”&&isHidden（elem））{
values[index]=jQuery.\u数据（elem，“oldsplay”，css\u defaultDisplay（elem.nodeName））；
}
}否则{
如果（！值[索引]）{
隐藏=isHidden（元素）；
如果（显示和显示！=“无”| |！隐藏）{
jQuery._数据（elem，“oldsplay”，隐藏？显示：jQuery.css（elem，“display”）；
}
}
}
}
//设置第二个循环中大多数元素的显示
//避免持续回流
对于（索引=0；索引<长度；索引++）{
elem=元素[索引]；
如果（！elem.style）{
继续；
}
如果（！show | | elem.style.display==“无”| | elem.style.display==“无”）{
elem.style.display=show？值[索引]| |“”：“无”；
}
}
返回元素；

---

}

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

这里有一篇文章会给你更多的信息

---

可能不是一个完整的答案，特别是因为您要求使用一种比使用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>

div{
背景色：黑色；
}
$（文档）.ready（函数（）{
警报（$（“#parentTest”）.css（“背景色”）；//rgb（0,0,0）
$（'#iframeTest'）.ready（函数（）{
var iframeDivTest=$（“#iframeTest”）.contents（）.find（“body”）.html（“”）；
警报（iframeDivTest.css（“背景色”）；//透明
});
});
???

因此，如果您希望在不受样式表干扰的情况下使用默认值，那么创建一个虚拟的、无源的、隐藏的IFRAME/sandbox供您的javascript使用可能是一个不错的选择

---

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

好吧，这个标题实际上有误导性。目前，我只想得到原来的显示。（尽管如此，我还是看了看）我不知道你的意思。默认值为标准HTML元素的默认值，默认值为您自己的css样式表中设置的值，因此在应用任何jquery样式之前，或者。。。？我不想这么说，但我认为“Default”有点模棱两可。好吧，那么，当您最初创建一个DIV元素并且自己不应用任何样式时，它是“Default”，或者“normal”显示是“block”。如果我在我的样式标签中设置它的样式，然后说div{display:none；}，我就不能再得到div的“应该是”显示。另外，你使用的jquery版本、浏览器类型和版本是什么？1.10.2，Chrome是我目前使用的。Ricky Yoder：那么基本上，你想得到元素的浏览器标准默认值？啊。我现在明白了。根据我的建议，一旦您将元素附加到文档中，它将由页面的输出CSS（如果有适用于元素的CSS）设置样式，因此使用iframe将是唯一的方法。谢谢你的回答，我一定会给他们发电子邮件的