元素的"getUnComputedStyle"

Question

我发现浏览器之间的差异如何在浏览器窗口缩放时报告计算的样式尺寸.JSBIN示例位于http://jsbin.com/pilohonevo/2/.代码如下:

$(window).resize(function()
{
  var width1=$(".class1").css("width");
  $(".class1").css("width",width1);

  var width2="200px";
  $(".class2").css("width",width2);

  var width3=$(".class3").css("width");

  $("#width1").html(width1);
  $("#width2").html(width2);
  $("#width3").html(width3);

  $("#overflow1").html($(".overflow1")[0].scrollWidth);
  $("#overflow2").html($(".overflow2")[0].scrollWidth);
  $("#overflow3").html($(".overflow3")[0].scrollWidth);
});

通过按CMD几次缩放到最小值然后按CMD +几次再回到100%,在Chrome(Mac版本38.0.2125.111)中,您将获得以下值:

白色DIV 1报告其宽度为203px,尽管DIV 2和3报告200px.scrollWidth也是203,这也是错误的.这意味着如果您不确定浏览器窗口是否未缩放,则无法使用getComputedStyle或jQuerys .css()获取尺寸.由于缩放不可取消,因此您永远无法确定,您永远不会相信这些尺寸.我还测试$(elem).scrollLeft()和$(elem).scrollTop()和缩放时,这些是不可靠的为好.

因此,解决方法可以是使用"原始"值,而不是"计算"值.

是否有跨浏览器的javascript或jQuery方法来获取类似于getUnComputedStyle()使用样式表和/或样式属性中的原始值来确定维度的方法,因为它们是唯一可以缩放安全的？

根据我的测试,确定缩放级别并根据其进行更正是不可靠的,因为存在浏览器差异,并且不同样式属性中的错误级别与缩放级别不一致.

(Firefox Mac 33.1和Safari Mac版本7.1(9537.85.10.17.1)和IE 11 Win和仿真模式直到版本7报告正确的值.

Opera Mac 25.0.1614.68,Safari Win 5.1.7和上面报告的Chrome报告错误值.)

Answer 1

如果我理解您想要正确完成的任务（如果我不这样做，请这么说，我会尽力改进我的答案），并假设您已经设法以某种方式捕获缩放事件（这不是给定的） ）， 你可以：

1. 克隆您尝试从中获取 CSS 样式的 div；
2. 以不显眼的方式将克隆附加到 dom（即不会覆盖文档上任何其他元素的方式）；
3. 删除它的style属性（以防万一它被其他脚本或函数设置）；
4. 从中获取您需要的所有样式；
5. 最后，完成后从 dom 中删除克隆。

无论页面缩放如何，这个演示都适合我。

jQuery(function($) {
    function getRawStyles(sel, styles) {
        sel = $(sel);
        var clone = sel.clone().removeAttr("style").attr("class", "cloneDiv").insertBefore(sel);
        $.each(styles, function(index, style) {
            console.log( style + ": " + $(clone[0]).css(style) );
        });
         $(".cloneDiv").remove();  
    }
    $(document).ready(function() {
        $("button", this).on("click", function() {
            getRawStyles("#myDiv", ["height", "width"]);
        });
    });
});

#myDiv {
    background: grey;
    height: 50px;
    width: 200px;
}
.cloneDiv {
    left: -10000;
    opacity: 0;
    top: -10000;
    position: absolute;
    z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv" style="height:200px; width: 100px"></div>
<br/>
<button>Log Computed Styles</button>