Javascript 使用jQuery获取CSS属性并实时写入页面

我试图获取CSS属性的名称和值，并将它们写入页面。问题是这些值不会实时更改，例如，不透明度应显示从1到0的递减值。此外，不显示填充、边框和边距值。这可以通过在firefox中打开页面并使用firebug进行检查来看到

标记

<div id="container">
    <div id="box">click to hide me</div>
    <p id="result">&nbsp;</p>
</div>

脚本

$(document).ready(function() {
    $( "#box" ).click(function() {
        var html = [ "The clicked div has the following styles:" ];
        var styleProps = $( this ).css(["width", "height", "padding", "border", "margin", "opacity", "display"]);
        $.each( styleProps, function( prop, value ) {
            html.push( prop + ": " + value );
        });
        $( "#result" ).html( html.join( "<br>" ) );
    });

    $("#box").click(function() {
        $("#box").hide(5000);
    });
});

$（文档）.ready（函数（）{
$（“#框”）。单击（函数（）{
var html=[“单击的div具有以下样式：”；
var styleProps=$（this）.css（[“宽度”、“高度”、“填充”、“边框”、“边距”、“不透明度”、“显示“]）；
$.each（样式道具、函数（道具、值）{
html.push（prop+“：”+值）；
});
$（“#结果”）.html（html.join（“
”））；
});
$（“#框”）。单击（函数（）{
$（“#盒”）。隐藏（5000）；
});
});

为了清楚起见，我是jQuery/javascript的noob，我正在尝试找出jQuery hide（）方法更改了哪些值和哪些值。在firefox中使用firebug，我看到高度、宽度、边框、填充、边距、不透明度和显示都为空。我试图在result div中的页面本身中显示这一点

---

这里有几个问题

您无法一次性获得

边距

、

填充

和

边框

css属性。您需要获得类似于

marginTop

、

paddingBottom

、

borderWidth

等内容

您需要获得单独函数的状态更新，然后在hide的

progress

上调用它

$.fn.update = function(element) {
    var html = [ "The clicked div has the following styles:" ];
    var styleProps = $( this ).css(["width", "height", "opacity", "display"]);
    $.each( styleProps, function( prop, value ) {
        html.push( prop + ": " + value );
    });
    element.html(html.join("<br>"));
}

var box = $("#box");

box.click(function() {
    box.hide({
        duration: 5000, 
        progress: function() {
            box.update($("#result"));
        }
    });
});

$.fn.update=函数（元素）{
var html=[“单击的div具有以下样式：”；
var styleProps=$（this）.css（[“宽度”、“高度”、“不透明度”、“显示”]）；
$.each（样式道具、函数（道具、值）{
html.push（prop+“：”+值）；
});
html（html.join（“
”）；
}
变量框=$（“#框”）；
框。单击（函数（）{
隐藏({
持续时间：5000，
进展：职能（）{
框。更新（$（“#结果”）；
}
});
});

---

在第一次单击回调（设置值的回调）中设置DOM后，您不会更新它。您应该查看window.setInterval或requestAnimationFrame之类的函数，以使用间隔上的值更新DOM。display属性仍然显示block而不是null.great。我也可以将单个框模型属性推入其中？

$.fn.update = function(element) {
    var html = [ "The clicked div has the following styles:" ];
    var styleProps = $( this ).css(["width", "height", "opacity", "display"]);
    $.each( styleProps, function( prop, value ) {
        html.push( prop + ": " + value );
    });
    element.html(html.join("<br>"));
}

var box = $("#box");

box.click(function() {
    box.hide({
        duration: 5000, 
        progress: function() {
            box.update($("#result"));
        }
    });
});