Issue with getting a style setting from javascript

Question

So I am trying to get it so each time a button is pressed a circle gets wider. I have ran into the most peculiar issue, their is a block of code that when you put it in an alert() method it shows properly, however it shows as nul if you put it into a variable then display it. Here is the full code.

<!doctype html>
<html>
<head>
 <title>CSS Basics</title>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <style>
    #circle {
        width:200px;
        height:200px;
        border-radius:200px;
        background-color:red;
    }
    </style>

</head>

<body>
    <div id="circle">asdfasdf</div>
    <button id="Saver"> Press me to save your text </button>
    <input id="Text" type="text" value="test"/>

    <script type="text/javascript">

        var divId="circle";
        var obj= document.getElementById("Saver");
        var it234 = 1;
        //THIS IS A COMMENT DOESNT THSI MAKE YOU  HAPPY
        obj.onclick=function() {

            document.getElementById("circle").innerHTML = document.getElementById("Text").value;
            it234 = parseInt(document.getElementById("circle").style.width.substring(0,3));
            //document.getElementById("circle").style.width="300px";
            alert(it234);
        }

    </script>
</body>
</html>

And here is the section in progress

This should work but doesnt

obj.onclick=function() {

            document.getElementById("circle").innerHTML = document.getElementById("Text").value;
            it234 = parseInt(document.getElementById("circle").style.width.substring(0,3));
            //document.getElementById("circle").style.width="300px";
            alert(it234);
        }

However instead of working it shows an alert with Nan. How can I get the width of this div saved into a variable (preferably in string format)?

I could be wrong here, but I'm pretty sure if you don't have a style on an element to give it a fixed width, then style.width comes back empty. You need to give it an initial width in order for it to have a style for width. — Ryan Mann
– Ryan Mann, Commented Feb 3, 2016 at 1:34

adeneo · Accepted Answer · 2016-02-03 01:38:50Z

4

Javascripts element.style only returns inline styles, not styles set in stylesheets or style tags, so document.getElementById("circle").style.width returns nothing, just an empty string, and parsing that to integer returns NaN (Not A Number).

Using getComputedStyle would get you the computed style instead

var divId = "circle";
var obj = document.getElementById("Saver");
var it234 = 1;

obj.addEventListener('click', function() {

    document.getElementById("circle").innerHTML = document.getElementById("Text").value;
    console.log(document.getElementById("circle").style.width)

    var elem  = document.getElementById("circle");
    var style = window.getComputedStyle(elem);
    var width = style.getPropertyValue('width');

    it234 = parseInt( width.replace(/\D/g,'') );

    alert(it234);

}, false);

edited Feb 3, 2016 at 1:38

answered Feb 3, 2016 at 1:31

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

3 Comments

ProgrammerInProgress Over a year ago

Does this method work with any variable I define in css? How is it for cross browser compatibility?

adeneo Over a year ago

Yes, it works with any property set in css, and it's supported from IE9 and up, so it's basically supported in all browsers you should be supporting.

ProgrammerInProgress Over a year ago

IE9 means "internet explorer" why not support chrome or am I missing something?

timtim17 · Accepted Answer · 2016-02-03 01:39:04Z

0

Use element.offsetWidth to get the width.

answered Feb 3, 2016 at 1:39

timtim17

2954 silver badges14 bronze badges

3 Comments

adeneo Over a year ago

Note that offsetWidth includes borders and padding

ProgrammerInProgress Over a year ago

Is their a list somewhere that shows what name to use in javascript to get the css style variable?

adeneo Over a year ago

@ProgrammerInProgress - that depends, offsetWidth, clientWidth etc. does not return CSS styles, they return the actual computed width, including or excluding things like scrollbars, padding, margin, borders etc. To get the actual set style, you'd use element.style for inline styles, and getComputedStyle for the computed style.

Collectives™ on Stack Overflow

Issue with getting a style setting from javascript

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related