Javascript - element.style.left returning blank

Question

My code here is designed to have a slide menu pull out. For some reason, I cannot seem to grab the "left" styling property of my element with id "news". Here is my javascript:

var current;
var currentValue;
var motionDir = 1;
window.onload = slide;
function slide() {
    current = document.getElementById('news'); //returns HTML Object div
    currentValue = current.style.left; //returns blank
    function move() {
        if(motionDir == 1) {
            if(currentValue !== '0%') {
                currentValue = parseInt(currentValue.substring(0, currentValue.length - 1)) + 2;
                current.style.left = currentValue + '%';
            } else {
                clearInterval(intervalID);
            }
        } else {
            if(currentValue !== '-50%') {
                currentValue = parseInt(currentValue.substring(0, currentValue.length - 1)) - 2;
                current.style.left = currentValue + '%';
            } else {
                clearInterval(intervalID);
            }
        }
    }
    var intervalID = setInterval(move, 20);
}

Notice where I set the current andent currentValue variables. CurrentValue returns a blank value for whatever style property I try setting it to. If I do:

currentValue = current.style;

Then it outputs [OBbject CSS2Properties] and I am unsure why it does not say CSS3. Anyways, I am totally stumped and have spent an hour trying to debug this, but no luck. I can assure you that all the code runs fine and it is linked properly to the DOM.

Your stylesheet is irrelevant. `.style` represents the element styles given in the `style` html attribute. — Bergi, Oct 17 '14 at 01:09
But I swear, I SWEAR I have used .style before on properties applied via the stylesheet rather than inline. — turkey3, Oct 17 '14 at 01:18
Ah, it all makes sense now! I am testing this on a laptop rather than on a web server, and when a web server runs it it appends all the stylesheet properties TO the HTML document. Makes sense why it won't work now!!! — turkey3, Oct 17 '14 at 01:19

score 2 · Answer 1 · edited May 23 '17 at 12:11

2

It's not going to work unless you defined it as an inline style.

What that means is that you would have to have:

<div id="news" style="left: 15px;"></div>

in order for it to work.

You could use offsetLeft to get it in a similar fashion, otherwise look at this response.

edited May 23 '17 at 12:11

Community

1
1

answered Oct 17 '14 at 01:01

Duniyadnd

4,013
1
22
29

Hmm, weird, because I have used top before and it was defined in the stylesheet. – turkey3 Oct 17 '14 at 01:05
Ah, it all makes sense now! I am testing this on a laptop rather than on a web server, and when a web server runs it it appends all the stylesheet properties TO the HTML document. Makes sense why it won't work now!!! – turkey3 Oct 17 '14 at 01:19

Javascript - element.style.left returning blank

1 Answers1