- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要为元素获取一个计算 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
最佳答案
最近这方面发生了变化。
以前,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/
获取元素的样式时,我们总是使用 if(document.defaultView && document.defaultView.getComputedStyle) 检查浏览器是否支持该方法。 为什么不
我目前拥有的代码获得了整个 CSS,甚至是默认的。我想要的是只更改默认的 CSS。 function baba() { addEventListener("mouseover", function
我需要为元素获取一个计算 CSS 位置,但是当使用auto 而不是数字值时,我在不同浏览器中得到的结果不一致。 例如在下面的demo中设置bottom: auto;Chrome 和 Firefox 报
我正在尝试报告我创建的椭圆形 div 的边框半径值,但我得到了一个未定义的返回值。谁能解释为什么?我是犯了一个简单的错误还是我的代码有问题?谢谢你! CSS3
我在这里设置了一个演示: http://jsbin.com/evifeb/ 这更像是我在大声思考,而不是一个适当的问题,但是.. 为什么浏览器将样式规则与辅助方法和保留字一起直接插入到计算样式对象中?
这个问题在这里已经有了答案: text-decoration: apparent discrepancy between appearance and computed values (3 个答案)
我想创建一个具有 display: none 的模拟 div 用于测试目的。但是,在测试中设置显示然后调用 getComputedStyle 显示样式没有变化,即 const parent = doc
我有一段简单的代码: var recipes = document.getElementsByClassName("recipes"); var recipesStyle = window.getCo
我正在尝试像这样获取 CSS left 属性的值... window.getComputedStyle(document.querySelector('.test'), ':after').getPr
我只是问我做错了什么,因为我以前已经做过,我只是不记得是怎么做的,我一定是把旧代码弄丢了。 Firefox 有一个未记录的颜色值,称为 -moz-win-accentcolor,可用于获取 Windo
本质上,我试图使用 getComputedStyle 来获取属性值,而无需(直接)访问元素。请阅读下面的说明以了解更多详细信息。 这很难解释,如果你不明白,请告诉我。 这是我的 CSS 代码: .yS
getComputedStyle获取text-decoration属性继承失败,但可以获取font-size。 在 Firefox 25 和 GoogleChrome 30 中失败。 Note: In
在考虑向 Chromium 提交错误时寻找解决方法 - 如果元素有过渡,getComputedStyle 不会返回您期望它返回的内容,直到过渡结束。 长和短 - 如果我有一个高度为 24px 的元素,
@media screen{ a {color:green} } @media print{ a {color:red} } 有没有一种方法可以使用 JavaScript 在打印
我处于这样一种情况,我需要等到图像被加载后,一旦图像被加载,我需要得到它的计算高度,以便我可以相应地设置黄色选择器。 问题:基于图像的计算高度,我正在设置黄色选择器。它随机与 setTimeout()
我有以下代码用于更新名为 --changeColor 的 css 变量 const r = document.querySelector(':root'); const currentColor =
我只是想知道为什么,例如,window.getComputedStyle(element).top 总是以像素为单位返回测量值,即使在设置了 top 位置的情况下也是如此像这样明确地 % elemen
getComputedStyle 的 MDN 文档州 The values returned by getComputedStyle are known as resolved values. The
我在定义 left、right 和 bottom 的元素上调用 getComputedStyle。 在 Chrome 中,它返回 'auto' 作为 top 的值,但在 Firefox 中,它返回像素
我目前遇到一个“奇怪的问题”...我是 JavaScript 的初学者,我想获取图像的高度以便设置 a 的大小。 我得到屏幕的宽度 我根据屏幕尺寸设置图像的宽度=> 我猜电脑也设置了图像的高度。 我问
我是一名优秀的程序员,十分优秀!