How to use element with object property like element.myobj.prop

Question

If I declare a object like

var obj =function(element){
return{
wide:element.clientWidth
}}

I must declare it like

var fdiv=new obj(document.etc.etc.);

and call like

fdiv.wide;

But this is quite limiting my code. I must declare new obj for each element. My question is how i can set element name dynamic in order to be able to use like nodeI_want.obj.wide or obj.nodeI_want.wide or anything like this to use my property with dynamically given node. note:clientWidth prop. is just an example to clarify it will be replaced in my code with my own properties.

I don't get it, why would `wide` be a property of the element, and why would you need it if it's just the same as the `clientWidth` property? — adeneo, Apr 06 '15 at 18:35
What you've posted is invalid code, and it makes no sense, at least not to me ? — adeneo, Apr 06 '15 at 18:39
because it is not supposed to work the aim here to understand the logic behind the system. @adeneo — nikoss, Apr 06 '15 at 18:42
this is what i want o avoid it is not dynamic for each element i must create a new object — nikoss, Apr 06 '15 at 18:43
This question needs to be reworded. It sounds like you are trying to ask how to dynamically generate objects? Or am i misinterpreting what you are trying to ask? — , Apr 06 '15 at 18:47
Well, you could at least bother to write the object correctly, as in `return {key : 'value'}` — adeneo, Apr 06 '15 at 18:49
An answer shouldn't explain the question. An answer should solve the question. — , Apr 06 '15 at 18:50

score 1 · Accepted Answer · answered Apr 06 '15 at 18:43

1

You seem to be wanting to extend HTMLElement. The proper way to do it is by adding your method to the prototype of HTMLElement.

For example (I didn't use your original function code because it's quite vague in what it tried to achieve):

HTMLElement.prototype.getMyWidth = function() {
    return this.clientWidth;
};

See HTMLElement

answered Apr 06 '15 at 18:43

haim770

48,394
7
105
133

this is exactly how i want can you explain a bit please why we used prototype and how to recall this – nikoss Apr 06 '15 at 18:47
And this is what most of us would try really hard to avoid, extending native constructors/prototypes. – adeneo Apr 06 '15 at 18:48
@adeneo, I was pondering whether to cite the critics on this technique as well. However, from pure JS perspective (regardless of DOM and browsers) it's a better approach and hopefully would lead the OP in the correct path. – haim770 Apr 06 '15 at 18:54
@nikoss, prototype is a basic subject in Javascript. Try to read more on the subject (for example: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) – haim770 Apr 06 '15 at 18:55
@adeneo in this case to write a function which will return node and adding property right after this function is better e.g. _("#elem").wide and Why we must avoid adding into native constructors – nikoss Apr 06 '15 at 19:10
http://stackoverflow.com/questions/14034180/why-is-extending-native-objects-a-bad-practice – adeneo Apr 06 '15 at 19:22

score 1 · Answer 2 · answered Apr 06 '15 at 18:48

function ElementObj(element){
    this.element = element;
    this.width = this.element.offsetWidth;

    return this;
}

Now you can do:

var elem1 = new ElementObj(document.getElementById('div1'));
var elem2 = new ElementObj(document.getElementById('div2'));

Where elem1 returns object:

{
    element: DOMElement
    width: 100
}

How to use element with object property like element.myobj.prop

2 Answers2