CODEWITHSUNDEEP
javascripthtmlcss
Thor
Thor

Reputation: 10028

What is the reason for the discrepancy between the height and width values I set and the ones returned?

I'm new to HTML and JavaScript. I'm trying to learn JavaScript width() and height() method. I have set the height and width of div1 to 100px and 300px respectively.

However, when I run the code, the height and width returned by the JavaScript is 299.666666 and 99.666665 respectively. What is the reason for the discrepancy between the values I set and the ones returned?

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("button").click(function () {
                    var txt = "";
                    txt += "Width of div: " + $("#div1").width() + "</br>";
                    txt += "Height of div: " + $("#div1").height();
                    $("#div1").html(txt);
                });
            });
        </script>
        <style>
            #div1 {
                height: 100px;
                width: 300px;
                padding: 10px;
                margin: 3px;
                border: 1px solid blue;
                background-color: lightblue;
            }
        </style>
    </head>
    <body>

        <div id="div1"></div>
        <br>

        <button>Display dimensions of div</button>

        <p>width() - returns the width of an element.</p>
        <p>height() - returns the height of an element.</p>

    </body>
</html>

Upvotes: 3

Views: 211

Answers (4)

Vinc
Vinc

Reputation: 406

The reason about that discrepancy is that browsers differ on zooming functions. So as tyler durden said here:

"The reason why some browsers don't zoom properly has nothing to do with sub-pixel support, it is because they are not remembering the exact position and rounding correctly. In other words, they are prematurely rounding the position and that causes the image to be mis-aligned."

In fact, for the example you are referring too, on my browsers, safari as always zooms only text!

IE, Chrome, Opera and Firefox are resizing by calculating not only the text, but also, all the elements you are using on your page (border, width,padding etc). In addition, Border AFFECTS the outside edge of your element so lets see if its rounded properly: 

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script>
        $(window).ready(function () {
            $("button").click(function () {
                var txt = "";
                txt += "Width of div1: " + $(window).width() + "</br>";
                txt += "Width of div1: " + $("#div1").width() + "</br>";
                txt += "Inner left border width of div1: " + $("#div1").css("border-left-width") + "</br>";

                txt += "Height of div1: " + $("#div1").height();
                $("#div1").html(txt);
                fixSubpixelLayout($('#all-cats'), $('#all-cats .cat'));
            });
        });

    </script>
        <style>
            #div1 {
                height: 100px;
                width: 300px;
                padding: 10px;
                margin: 3px;
                border: 1px solid blue;
                background-color: lightblue;
            }
        </style>
    </head>
    <body>

        <div id="div1"></div>
        <br>

        <button>Display dimensions of div</button>

        <p>width() - returns the width of an element.</p>
        <p>height() - returns the height of an element.</p>

    </body>
</html>

well border width is changed while zooming on my chrome and firefox, but it is not on my IE!! So the reason for that "malfunction" $("#div1").width() is inside the calculation method that each browser uses while zooming.

If u want a solution for your problem you can use outline instead of border, in order to have a border unbounded from its within element.

Upvotes: 1

tao
tao

Reputation: 90013

Although true, my initial answer was irrelevant to the question asked. As clarifications were asked in comments, while trying to address them, I discovered my initial error and, attempting to provide a proper answer I have found this answer to a similar question, to be quite relevant for the one above.

Another quite common reason for pixel scaling, mentioned by adeneo in comments below is browser scaling/zooming (Ctrl/Cmd++, Ctrl/Cmd+-, Ctrl/Cmd+0 to reset).

Despite its chosen name, browser px have nothing to do with physical, device pixels and they are not the "default" screen unit. So it needs to be calculated. It is a non-linear angular measurement:

As defined in CSS Lengths,

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

A more detailed explanation here.

Upvotes: 2

Speckle
Speckle

Reputation: 103

In general, rounding in binary can cause this.

Can't be sure about this specific case but, rounding a number in baseX isn't the same as the same number rounded after conversion to baseY. Computers do their maths with ones and zeroes, not all languages iron out the discrepancy.

Upvotes: 1

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

You can use parseInt method to get absolute value.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("button").click(function () {
                    var txt = "";
                    txt += "Width of div: " + parseInt($("#div1").width())+ "</br>";
                    txt += "Height of div: " + parseInt($("#div1").height());
                    $("#div1").html(txt);
                });
            });
        </script>
        <style>
            #div1 {
                height: 100px;
                width: 300px;
                padding: 10px;
                margin: 3px;
                border: 1px solid blue;
                background-color: lightblue;
            }
        </style>
    </head>
    <body>

        <div id="div1"></div>
        <br>

        <button>Display dimensions of div</button>

        <p>width() - returns the width of an element.</p>
        <p>height() - returns the height of an element.</p>

    </body>
</html>

Upvotes: 2

Related Questions