style an html element using object constructor

Question

I'm practicing using constructor function/objects. I want to style some divs with CSS dynamically using this type of object. I'm trying to get the divs with document.getElementById but am not able to style them. I'm getting the error message 'cannot set backgroundColor of undefined'. It seems i'm not actually getting the element I want or it's not being saved to the variable.

How can I get the element and pass it through the construtor function?

<div id='div1'>div1</div>
<div id='div2'>div2</div>

function StyleDiv(id) {
document.getElementById('id');
this.style.backgroundColor = 'blue';
this.style.height = '110px';
this.style.width = '110px';
}

var div1st = new StyleDiv('div1');
var div2nd = new StyleDiv('div2');

Christofer Eliasson · Accepted Answer · 2014-01-17 11:24:23Z

1

You need to keep a reference to the selected element in a variable, and then use that variable when setting the styling:

function StyleDiv(id) {
   var elm = document.getElementById(id); 
   elm.style.backgroundColor = 'blue';
   elm.style.height = '110px';
   elm.style.width = '110px';
}

Note that I also removed the quotes around id in getElementById(id)

About "this"

The this keyword can be a bit troublesome to understand in JavaScript initially. Here is a good article that will explain it a bit further.

With the help of that article, I believe you will be able to create a more object oriented approach to all this. You might want have the element as a public property of the instance perhaps, or expose a public method to set styles on that element.

edited Jan 17, 2014 at 11:24

answered Jan 17, 2014 at 11:18

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gimg1 · Accepted Answer · 2014-01-17 11:23:01Z

0

You have the idea slightly wrong. When you use document.getElementById you must store a reference to the element it returns. So for example this would be how you select an element:

var id = 'div1';
var element = document.getElementById(id);

Then to style it you can use:

element.style.width = '110px';

To maintain a public reference to the element try this code:

function StyleDiv(id) {
    this.element = document.getElementById(id); 
    this.element.style.backgroundColor = 'blue';
    this.element.style.height = '110px';
    this.element.style.width = '110px';
}

answered Jan 17, 2014 at 11:23

gimg1

1,18711 silver badges26 bronze badges

Comments

Andy · Accepted Answer · 2014-01-17 11:30:43Z

0

Assign the DOM node to a variable and use that to change the style. Also, remove the quotes around id since it's a reference to the argument that you're passing in to the function.

function StyleDiv(id) {
  var el = document.getElementById(id);
  el.style.backgroundColor = 'blue';
  el.style.height = '110px';
  el.style.width = '110px';
}

edited Jan 17, 2014 at 11:30

answered Jan 17, 2014 at 11:18

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

style an html element using object constructor

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related