CODEWITHSUNDEEP
javascriptclient-side
CodeChef
CodeChef

Reputation: 906

Override members on a built-in JavaScript object

I would like to override the default behavior of the offsetParent member of all html elements. I would like to do something like this if it's possible:

// For <div id="foo"></div>
var oFooElem = document.getElementById("foo");
oFooElem._offsetParent = oFooElem.offsetParent;
oFooElem.prototype.offsetParent = function() {
    window.status = 'offsetParent called.';
    return this._offsetParent;
};

Is this even possible? If so, please post the corrected code sample. Thanks!

Update:

@some Thank you for your help. It sounds like this is not possible. I have expanded on the problem that provoked this question in a new question if you're interested.

Upvotes: 0

Views: 1844

Answers (1)

some
some

Reputation: 49582

As far as I know it is not possible. In firefox I get exception "setting a property that only has a getter", IE gives error, Chrome gives error, but in Opera it works (if I assign it on the element, not the prototype)!

But you have another problem. offsetParent isn't a function so it will never be called like a function and your alert will never happen. In opera (the only browser I found where you could replace it in) you only get the function back.

You can however add a new function (will work in Firefox, Chrome and Opera but not in IE since IE don't have the constructor property):

var e = document.getElementById("mydiv"); //Get a div element
//Adds a _offsetParent function to all DIV elements.
e.constructor.prototype._offsetParent=function(){
  alert("offset parent called"); return this.offsetParent;
};
e._offsetParent();

Update By reading your description here I see your error:

  1. you get a reference to the object called myInnerContent
  2. you remove that object from the DOM when you replace the content of the outer tag.
  3. you try to get the parent from the old object who is orphan and that no longer are in the DOM. IE gives you an Error and Firefox gives you null.

You already have the solution on your page: Save the name of the object. Optionally you can choose to update the global variable when you update the content, or only update the innerHTML of the inner div.

Upvotes: 3

Related Questions