Javascript - dynamically changing width of an element

Question

There are a few similar questions on Stack but I think mine is the result of some syntax error on my part. Anyway, I'm building a lightbox in javascript and want to dynamically set the absolute position (left % css) to be half of the width of the element.

This is a snippet from the code. Full code is here http://jsfiddle.net/Yab3Q/4/

var modal = document.getElementById(btnId+"-modal");
var modalChildren = modal.childNodes;

for (var x = 0; x<modalChildren.length; x++){
    if (!(modalChildren[x].className === "lightBox")){
        var childWidth = modalChildren[x].offsetWidth;
        var halfWidth = childWidth / 2;
        modalChildren[x].style.left = halfWidth + "px";
    }
}

The line modalChildren[x].css.left = halfWidth + "px"; is returning "Uncaught TypeError: Cannot set property 'left' of undefined". However, modalChildren[x].className and modalChildren[x].offsetWidth; both return the expected values, so I'm unsure why I can view but not update the css here.

Do you mean this line? ` modalChildren[x].style.left = halfWidth + "px";` — NullRef
– NullRef, Commented Dec 15, 2012 at 6:36

Pieter Willaert · Accepted Answer · 2012-12-15 06:55:50Z

1

You try to alter the style properties of the following elements:

0: <div>
1: #text
2: <img>
3: #text

You can see this list for yourself by typing

console.log(modalChildren)

since a textNode does not have a style property, an error is thrown

edited Dec 15, 2012 at 6:55

answered Dec 15, 2012 at 6:36

Pieter Willaert

87913 silver badges36 bronze badges

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

2 Comments

JVG Over a year ago

Got it. What's the best way to exclude the #text from the if statement I have? I tried if (!(modalChildren[x].className === "lightBox") && !(modalChildren[x].nodeType == "#text")) but to no avail

Pieter Willaert Over a year ago

just try this: if (modalChildren[x].style)

karaxuna · Accepted Answer · 2012-12-15 06:35:51Z

1

text node has no style property: log and check:

for (var x = 0; x<modalChildren.length; x++){
            console.log(modalChildren[x]);
            console.log(modalChildren[x].style);
            if (!(modalChildren[x].className === "lightBox")){
                var childWidth = modalChildren[x].offsetWidth;
                var halfWidth = childWidth / 2;
                modalChildren[x].style.left = halfWidth + "px";
            }
        }

Take a look at node types: http://www.javascriptkit.com/domref/nodetype.shtml

answered Dec 15, 2012 at 6:35

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Collectives™ on Stack Overflow

Javascript - dynamically changing width of an element

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related