gpt4 book ai didi

javascript - getComputedStyle() 跨浏览器的一致性

转载 作者:行者123 更新时间:2023-11-30 19:34:03 24 4
gpt4 key购买 nike

我需要为元素获取一个计算 CSS 位置,但是当使用auto 而不是数字值时,我在不同浏览器中得到的结果不一致。

例如在下面的demo中设置bottom: auto;Chrome 和 Firefox 报告 auto,但 Edge 报告 0px

var el1 = document.querySelector('#one');
el1.innerText = getComputedStyle(el1).bottom;

var el2 = document.querySelector('#two');
el2.innerText = getComputedStyle(el2).bottom;
#one, #two {
position: sticky;
padding: 20px;
color: white;
}

#one {
bottom: 0px;
background: red;
}

#two {
bottom: auto;
background: blue;
}
<div id="one"></div>
<div id="two"></div>

是否有其他方法可以跨浏览器一致地获取 auto 的实际计算值?


在边缘检查器中,您可以看到(下面的屏幕截图)实际设置值为 auto 但它显示的计算值为 0px

Edge Computer Styles


截图

Chrome 74.0.3729.131

Chrome

边缘 44.17763.1.0 | EdgeHTML 18.17763

Edge

最佳答案

最近这方面发生了变化。

以前,getComputedStyle 返回 Computed Values一个元素,现在它应该返回它的 Resolved Values .

对于 bottom 属性,rules to get this resolved value are :

A resolved value special case property like top defined in another specification
  If the property applies to a positioned element and the resolved value of the display property is not 'none' or 'contents', and the property is not over-constrained, then the resolved value is the used value. Otherwise the resolved value is the computed value.

听起来您的浏览器将您的元素视为定位元素,因此使用used value (0px) 而不是 computed value (关键字“auto”或计算出的 )。

我必须承认我不太清楚为什么所有其他浏览器都不将您的粘性元素视为定位元素,我本以为它们也是,但他们确实同意相对定位的元素返回 < em>解析值 '0px',

var el1 = document.querySelector('#one');
el1.innerText = getComputedStyle(el1).bottom;

var el2 = document.querySelector('#two');
el2.innerText = getComputedStyle(el2).bottom; // '0px' everywhere
#one, #two {
position: relative;
padding: 20px;
color: white;
}

#one {
bottom: 0px;
background: red;
}

#two {
bottom: auto;
background: blue;
}
<div id="one"></div>
<div id="two"></div>

虽然非定位的返回计算值 'auto'

var el1 = document.querySelector('#one');
el1.innerText = getComputedStyle(el1).bottom;

var el2 = document.querySelector('#two');
el2.innerText = getComputedStyle(el2).bottom; // 'auto' everywhere
#one, #two {
position: static;
padding: 20px;
color: white;
}

#one {
bottom: 0px;
background: red;
}

#two {
bottom: auto;
background: blue;
}
<div id="one"></div>
<div id="two"></div>

不幸的是,我认为没有一种方法可以在实现这些更改的浏览器、未实现这些更改的浏览器和 Edge 之间获得一致的值,除非你可以避免定位你的元素,那么你应该得到 'auto' 无处不在。

关于javascript - getComputedStyle() 跨浏览器的一致性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56133589/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com