gpt4 book ai didi

javascript - ie10 中 clientHeight 的奇怪行为

转载 作者:行者123 更新时间:2023-11-29 22:13:24 26 4
gpt4 key购买 nike

我尝试通过此代码检查属性 clientHeight:

document.documentElement != null && document.documentElement.hasOwnProperty('clientHeight')

并且由于 document.documentElement.hasOwnProperty('clientHeight') 结果为假但是当我通过 'clientHeight' in document.documentElement 检查它时,它返回 true。在 Chrome、FF、Opera 中一切正常。这种行为的原因是什么?

最佳答案

没有回答你的问题(这是什么原因),但仍然想分享,所以从评论延伸:

具有属性的对象并不一定意味着该对象“拥有”该属性;它可以在原型(prototype)链中。

检查一下(在 Chrome DevTools 控制台中):

Object.create({"foo":"bar"}).hasOwnProperty("foo")
false
"foo" in Object.create({"foo":"bar"})
true

因此,正如您所见,foo 确实存在于创建的对象中,但它不为对象“拥有”,只是位于原型(prototype)链中。

当谈到 DOM 原型(prototype)时,事情可能会稍微复杂一些,因为不同的平台可能会以不同的方式实现同​​一件事。

根据 MDN , clientHeight定义在Element.prototype中,所以

在 Firefox 的控制台中,我得到:

[17:09:55.701] document.documentElement.hasOwnProperty("clientHeight")
[17:09:55.702] false
--
[17:10:19.894] "clientHeight" in document.documentElement
[17:10:19.895] true

但在 Opera Dragonfly 控制台中,我得到:

>>> document.documentElement.hasOwnProperty("clientHeight")
true
>>> "clientHeight" in document.documentElement
true

在 Chrome DevTools 控制台中,我得到了:

document.documentElement.hasOwnProperty("clientHeight")
true
"clientHeight" in document.documentElement
true

(我现在没有 IE10 可以测试,但如果我没记错的话,IE10 遵循 Firefox 风格)

所以在 Chrome 和 Opera 中,clientHeight 是“按元素”定义的,而不是在 Element.prototype 中。再往前走一点,你可以看到:

Object.getPrototypeOf(document.documentElement)
HTMLHtmlElement {insertAdjacentHTML: function, insertAdjacentText: function, click: function, insertAdjacentElement: function, getAttribute: function…}
constructor: function HTMLHtmlElement() { [native code] }
__proto__: HTMLElement
click: function click() { [native code] }
constructor: function HTMLElement() { [native code] }
insertAdjacentElement: function insertAdjacentElement() { [native code] }
insertAdjacentHTML: function insertAdjacentHTML() { [native code] }
insertAdjacentText: function insertAdjacentText() { [native code] }
__proto__: Element

至于你的问题,我会说,无论你想完成什么,都不要依赖这个“标准”,使用特征检测。


当我尝试在 JS 中克隆对象时,我首先注意到了这种行为。

当尝试克隆一个 ClientRect 对象(例如 document.body.getBoundingClientRect())时,当我想要有点花哨的时候,我首先尝试了:

var cloned={};
if(cloned.__proto__) {
cloned.__proto__=source.__proto__;
}
for(var i in source) {
if(Object.prototype.hasOwnProperty.call(source,i)){
cloned[i]=source[i];
}
}

在 Chrome 中,它工作正常,但在 Firefox 中,clone 看起来像 {width:undefined,height:undefined...}。所以我将 for..in 更改为:

for(var in source) {
cloned[i]=source[i];
}

在 Firefox 中,这在第一个 i 处给了我一个异常,因为这 6 个属性是只读的。

在一些失败之后,我得出结论,Firefox 中的 ClientRect 是不可构造的,因此严格来说,不能完美地克隆。

关于javascript - ie10 中 clientHeight 的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16809323/

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