如何从隐藏元素中获取BoundingClientRect? (不在IE上工作)

时间:2017-03-09 09:37:28

标签: javascript html css internet-explorer

我从隐藏元素中找到了// Input string $order = "item[]=2&item[]=1&item[]=3&item[]=4&item[]=5&item[]=6&item[]=7&item[]=8&item[]=9&item[]=10&item[]=11&item[]=12"; // Parse it to values and store them in $pieces $pieces = array(); parse_str($order, $pieces); // Need to sort the values to let the comparison succeed sort($pieces['item']); $valid = ($pieces['item'] == range(1, 12)); // Verification var_dump($valid); // It prints: // bool(true) 的方法:将getBoundingClientRect样式设为display,以便浏览器可以正确计算。然后立即隐藏元素,使其永远不会显示给用户。

但它并不适用于IE。它总是返回initial

如何在IE上完成这项工作?



0

var element = document.querySelector('#foo');

console.log('Element is hidden', element.getBoundingClientRect());

element.style.display = 'initial';
console.log('Element shows for little time', element.getBoundingClientRect());
element.style.display = 'none';




2 个答案:

答案 0 :(得分:2)

可悲的是,IE不支持initial值(mdn)。所以赋值什么也没做,元素仍然是隐藏的,这就是为什么你得到0作为结果高度。

但即使它确实如此,它也不会按预期的方式运行:display: initial为所有受影响的元素设置display的通用初始值 - inline divspan。这个行为很少proof-of-concept

相反,在隐藏它之前,您必须使用自己的代码缓存display的原始值。实际上,这正是jQuery和其他流行框架对.hide()的实现所做的:

  

匹配的元素将立即隐藏,无动画。   这大致相当于调用.css(“display”,“none”),   除了显示属性的值保存在jQuery中   数据缓存,以便以后可以将显示恢复到其初始值。   如果元素的显示值为内联并隐藏,则显示,   它将再次以内联方式显示。

答案 1 :(得分:-1)

这可能会间接回答这个问题 - 如果您需要为隐藏元素使用 getBoundingClientRect() ,另一种选择是以不同的方式隐藏它(除了 display:none)。例如,将颜色和/或背景颜色设置为透明。