Error in clientWidth measurement providing inaccurate width

I recently adjusted the width of an image (img tag) to be 1150px

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

Surprisingly, the clientHeight is now showing as 1146

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

What could be causing this discrepancy? Did I make a mistake somewhere?

javascripthtmlcss

Answer №1

To accurately calculate dimensions, make use of offsetWidth and offsetHeight, considering borders and padding.

Here is an example:

alert("The height is " + document.getElementById("background-image-myos").offsetHeight);
alert("The width is " + document.getElementById("background-image-myos").offsetWidth);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm not sure if I'm doing this right, the image seems to be overlapping the border

Just dipping my toes into the world of HTML/CSS, so feel free to point out any major errors in my code. The issue I'm facing is illustrated in this image (Apologies for the black boxes covering up some content; focus is on the top image). Check out ...

htmlcssimageborder

Array-based input validation

Is there a way to validate an input field against a list of strings in an array without using custom directives or patterns? For example, if the array contains town, city, and house, then typing any of those words should result in a validation failure. An ...

javascriptangularjs

React encountered an unexpected end of JSON input while streaming JSON data

Currently, I am facing a challenge with streaming a large amount of data from a NodeJS server that retrieves the data from Mongo and forwards it to React. Due to the substantial volume of data involved, my approach has been to stream it directly from the s ...

javascriptnode.jsreactjsstream

I'm perplexed by the inner workings of infinite ajax scroll in fetching additional posts

As someone who is new to JavaScript, I find it challenging to grasp the concept, especially when incorporating it with HTML. Despite this, I decided to experiment with infinite ajax scroll functionality. Below is my code snippet: var ias = jQuery.ias({ ...

javascriptjqueryhtmlajax

I am having trouble with the functionality of my bootstrap navbar toggler

Can you please review the code and help me identify the issue? The toggle button is not functioning properly, it should display the menu bar when clicked. <body> <!--navigation bar--> <nav class="navbar navbar-expand-sm navbar-dark bg-dan ...

htmlcssbootstrap-4togglenavbar

What steps should I take to ensure that this JSON.stringify function functions as intended?

I'm facing a minor challenge in formatting my arrays into the desired JSON structure. Here's the code I've used: var arrData = [{label:Test,value:199.12}, {label:Test2,value:1024}] var data = []; for (var i = 0; i < arrData.length ...

javascriptjson

PHP project encountered an error stating: "Uncaught TypeError: Ajax is not a function"

I am in the process of configuring an apache server for a project using XAMPP, MySQL, and PHP 5.6 Unfortunately, it appears that there is an issue with how JavaScript has been referenced in the project, and I am unable to get it to function correctly (th ...

javascriptajax

Variable remains unchanged by method

I am currently working on an app that utilizes the user's webcam. In case navigator.getUserMedia fails, I need to change the error variable to display the appropriate error message instead of the stream output. Since I am new to Vue, please bear with ...

javascriptvue.js

Is it possible to upload numerous profiles into the MYSQL database using this WP template?

Apologies in advance if my question is unclear, but in simple terms, I am looking to automate the process of uploading hundreds of profiles and jobs to this WP template: The developer of this template has stated that it is not possible to do this through ...

javascriptmysqlwordpress

What is the best way to eliminate an Injected Script from my system?

I have added a script to my GWT Application using ScriptInjector ScriptInjector.fromUrl("js/jquery-1.7.2.min.js").setWindow(ScriptInjector.TOP_WINDOW).setCallback(new Callback<Void, Exception>() { @Override public ...

javascriptgwt

Tips for configuring ejs data within the data attribute and processing it using client-side JavaScript

My aim is to transfer leaderboard information from the server to the client-side JavaScript. This is the code on my server side: const leaderboard = [[dog,cat],[car,bus],[foo,bar]] const toJson = JSON.stringify(leaderboard) res.render('gam ...

javascriptjsonexpressejs

What causes Angular to redirect to the route but display the incorrect view?

There is a fundamental issue I have encountered while working with routes: I have multiple routes defined If the user is not authenticated, they are redirected to the login page The problem lies in the fact that, on the initial display of the web app, t ...

javascriptangularjsangularjs-routing

Is there a way to retrieve the value from a moment-formatted date picker in the (YYYY-MM-DD) format?

I have a Vue application with a datepicker from Ant Design Vue that is returning the following moment object: Moment {…} _d: Thu Oct 24 1996 00:00:00 GMT+0800 (Malaysia Time) _f: "YYYY-MM-DD" _i: "1996-10-15" _isAMomentObject: (...) _isUTC: (...) _isVal ...

javascriptdatevue.jsmomentjsantd

Problems arise with identification of asynchronous functions

My async functions have been used successfully in various projects, but when incorporating them into a new project, they suddenly stopped working. One of the functions causing trouble is: const ddbGet = async (params) => { try { const data ...

javascriptnode.jsfunctionasynchronousasync-await

Issue with installing vscode-ripgrep during VSCode build/run process

After attempting to build and run VSCode on my Ubuntu 17.10 by following the instructions from this guide: https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run, I encountered an issue when installing dependencies using yarn. The error m ...

javascriptnode.jsnpmvisual-studio-code

Differentiating Typescript will discard attributes that do not adhere to an Interface

Currently, I am working with an API controller that requires a body parameter as shown below: insertUser(@Body() user: IUser) {} The problem I'm facing is that I can submit an object that includes additional properties not specified in the IUser int ...

javascripttypescript

Modify CSS using Javascript by targeting the class of ".modalDialog > div {}"

I am currently working on a project that involves creating a Modal Layer using CSS. I have successfully implemented the modal layer, but now I need to figure out how to change the width from the default 400px to something else when I open it with Javascrip ...

javascriptcss

How can JavaScript onClick function receive both the name and value?

My current challenge involves a function designed to disable a group of checkboxes if they are not checked. Originally, this function was set to work onClick(), with one argument being passed from the checkbox element. Now, I need this function to be trigg ...

javascripthtmlcheckboxcoldfusion-9

Ensure that a DIV element stretches beyond the limits of its container

I am having an issue with a div that should overlap everything else as it functions as a menu. Despite trying various positioning tricks, the desired effect is not achieved. The div is only shown when hovering over a certain element. Here is the structure ...

css

The assets path is the directory within the installed package that houses the main application files following the completion of a

I have a Vue.js UI component that is internally built using webpack. This reusable UI component library references its images as shown below: <img src="./assets/logo.png"/> <img src="./assets/edit-icon.svg"/>   <i ...

javascriptnode.jstypescriptnpmwebpack