- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试通过此代码检查属性 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/
document.documentElement.clientHeight 和 document.body.clientHeight 有什么区别?返回值在所有 Web 浏览器中是否一致,或者每个浏览器
console.log(document.body.clientHeight); 主要问题是我正在尝试调整图像大小以适应浏览器更改为的任何大小。因此,使用 .clientHeight 属性我可以检测大
我正在使用 JavaScript 动态创建 DOM 元素。我需要获得一个 div 的高度来做下滑动画。但是当我使用 clientHeight 时,它总是返回 0。offsetHeight 也做同样的事
我目前正在尝试修改“滑入” 的 Javascript 函数。脚本本身要求您定义 div 的高度,因此它在动态填充的 中几乎没有用。我在 javascript 的 clientHeight 属性上找到了
我想在 style.display='none;' 时获取 DIV 元素(用于在光标位置显示弹出菜单)的尺寸,但是 DIV 的尺寸总是返回 0。我似乎能够获得尺寸的唯一方法是使 DIV style.d
我的 Delphi 程序可以正常构建和编译,但是一旦在 Debug模式下运行,我就会收到以下错误; Property ClientHeight does Not Exist 查看所有 .DFM 文件源
我不得不创建一个快速但肮脏的展开/折叠功能来复制不需要使用 jQuery 的现有行为,因为现有方法使用 jQuery 并且存在一些需要大量调试才能解决的冲突。 最初我决定使用纯 CSS,但想不出一种方
渲染的 DOM 树是 {Logo}
我正在尝试使用 javascript 获取 div 的高度。我在 stackoverflow 上看到了很多这个问题,并且看到了两个答案。有人说是 clientHeight,有人说是 offsetHei
我有一个在 firefox 中工作的函数: function widthimg() { var wheight = document.getElementById('recent
属性 document.body.clientHeight 和 document.body.clientWidth 在 IE7、IE8 和 Firefox 上返回不同的值: IE 8: documen
我想要一种在多个浏览器之间获取可用窗口大小的方法,无需使用 jQuery/Mootools/任何第三方库依赖项。我对此做了一些研究,但我遇到的一半事情都在谈论 Netscape Navigator..
这两个是同一个东西吗? 因为它们似乎从我的测试中返回相同的值。 我正在尝试优化一些代码以使用 native js 属性... 最佳答案 .height()不包括内边距、边距或边框。 clientHei
我正在尝试获取 svg 元素的 clientWidth 和 clientHeight。基于本教程https://bl.ocks.org/curran/3a68b0c81991e2e94b19 ,我对我
我正在学习 JavaScript 并创建了一个倒数计时器 HTML 页面,其中 javascript 代码似乎返回错误 clientHeight的 body 。我想显示我的倒计时 HTML 即使重新调
我已将我的浏览器(FF 和 Chrome)最大化。 document.body.clientHeight 报告 128。这似乎太小了。可视区域至少为960px,我用屏幕尺测量的。我没有使用 iFram
我试图在滚动页面时获取客户端高度: @HostListener('window:scroll', ['$event']) onScrollEvent($event) { if ($event.s
在 javascript 函数中,我使用 document.body.clientHeight 来获取正文的高度。现在,根据 IE8 所处的模式(即怪癖或标准),该值会有所不同。 例子奇怪的是,doc
我尝试通过此代码检查属性 clientHeight: document.documentElement != null && document.documentElement.hasOwnProper
我有一段 JS 代码,判断是否有垂直滚动条,并将 CSS 类应用于元素。没什么大不了的。令我困惑的是,它似乎在做与我理解它应该做的相反的事情。这不是问题,除非它是一个错误并且在未来被修复。 代码: i
我是一名优秀的程序员,十分优秀!