Strange Behaviour Of Clientheight In Ie10

I try to check property clientHeight by this code: document.documentElement != null && document.documentElement.hasOwnProperty('clientHeight') and the result is false beca

Solution 1:

Not answering your question (what is the reason for this), but still want to share, so extending from comment:

An object with a property doesn't necessary mean that property is "owned" by that object; it can be in the prototype chain.

Check about this (in Chrome DevTools console):

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

So as you can see, foo does exist in the created object, but it's not "owned" by the object, just sits in the prototype chain.

When talk about DOM prototype, things can be a little bit more complicated as different platform may implement the same thing differently.

According to MDN, clientHeight is defined in Element.prototype, so

in Firefox's console, I got:

[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

but in Opera Dragonfly console, I got:

>>> document.documentElement.hasOwnProperty("clientHeight")
true
>>> "clientHeight"indocument.documentElementtrue

and in Chrome DevTools console, I got:

document.documentElement.hasOwnProperty("clientHeight")
true"clientHeight"indocument.documentElementtrue

(No IE10 for me to test right now, but if I remember correctly, IE10 follows Firefox style)

So it seems in Chrome and Opera, clientHeight is defined "per element", not in Element.prototype. Go a little further and you can see:

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

As to your problem, I would say, whatever you're trying to accomplish, don't depend on this "standard", use feature detection.

---

I first noticed this behavior when I tried to clone object in JS.

When trying to clone a ClientRect object (e.g. document.body.getBoundingClientRect()), when I want to go a little bit fancy, I first tried:

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];
    }
}

In Chrome it works fine, but in Firefox the cloned looks like {width:undefined,height:undefined...}. So I changed the for..in to this:

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

In Firefox this gave me an Exception at the very first i because those 6 properties are read only.

After some failure I concluded that ClientRect in Firefox is not constructible, so not strictly, perfectly cloneable.