/    Sign up×
Community /Pin to ProfileBookmark

How to detect the width of an element?

Copy linkTweet thisAlerts:
Dec 04.2003

How do I determine the width of an element (such as DIV or A) on a page using Javascript?

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@batfinkDec 04.2003 — Assume you have a div with an id of mydiv:

var x = document.getElementByID("mydiv").style.width;
Copy linkTweet thisAlerts:
@fredmvDec 04.2003 — [i]Originally posted by batfink [/i]

[B]document.getElementByID("mydiv").style.width; [/B][/QUOTE]
One slight typo — it's [font=courier]getElementByI[b][color=red]d[/color][/b][/font].
Copy linkTweet thisAlerts:
@batfinkDec 05.2003 — oops:eek: and I have not even got fat fingers to excuse me.
Copy linkTweet thisAlerts:
@deleriousauthorDec 05.2003 — That doesn't work in IE, Opera, or Mozilla.
Copy linkTweet thisAlerts:
@neil9999Dec 05.2003 — It does in IE: try this:

<html>

<head>

</head>

<body onload="alert(document.getElementById('mydiv').style.width);">

<div id="mydiv" style="width:200">

Hello

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@fredmvDec 05.2003 — It doesn't work most likely because you aren't referencing the correct property. It won't return a value for [font=courier]width[/font] if it isn't defined. The only way you can access it is using something like [url=http://www.csie.ntu.edu.tw/~b7506051/docs/GeckoDOM/examples7.html][font=courier]getComputedStyle[/font][/url].
Copy linkTweet thisAlerts:
@lukezwebDec 05.2003 — var td = document.getElementsByTagName('TD');

for(a=0; a<td.length; a++){

var widthofdiv = td[a].width;

}}
Copy linkTweet thisAlerts:
@batfinkDec 05.2003 — I have tried the code in IE, NN and Opera and they all work!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled</title>

</head>

<body>

<input type="button" value="Find width of DIV" onClick="alert(document.getElementById('mydiv').style.width)">

<div id="mydiv" style="width:300px; height:100px"></div>

</body>

</html>

As fredmv points out I think we need to see your code.
Copy linkTweet thisAlerts:
@deleriousauthorDec 06.2003 — OK thanks for the replies, everyone. The reason why the document.getElementByID("mydiv").style.width code didn't work is because I am not fixing the width of my DIV. But the getComputedStyle() works, and using offsetWidth also works.
×

Success!

Help @delerious spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...