CODEWITHSUNDEEP
javascripthtmlcss
user14653202
user14653202

Reputation:

clientWidth returing incorrect width

I have set the width of an image (img tag) to 1150px

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}
#background-image-myos {
    border: 2px solid black;
    border-radius: 5px;
    width: 1150px;
}

However, clientHeight is returning 1146

alert("Height is " + document.getElementById("background-image-myos").clientHeight);
alert("Width is " + document.getElementById("background-image-myos").clientWidth);

Why? Have I done something wrong?

Upvotes: 1

Views: 342

Answers (1)

Spectric
Spectric

Reputation: 32007

You need to use offsetWidth and offsetHeight, which takes into account borders, padding etc,.

Like so:

alert("Height is " + document.getElementById("background-image-myos").offsetHeight);
alert("Width is " + document.getElementById("background-image-myos").offsetWidth);

Upvotes: 2

Related Questions