Finding element dimension values width and height

143 100+

Hi

Is it actually possible to find the current size (in pixels) of a html element, regardless of whether or not these attributes have been set, or even if a percentage value was used?

My case: I want to find the height / width of a span tag or the height / width of a div tag. I've browsed the DOM but I can't figure out what to use. I've even tried directly accessing properties .height .width (which works for images) or .style.height .style.width.

If it's possible, that's great - it's pretty much all I need to know. =)

Thanks

Dec 5 '06 #1

Subscribe Post Reply

15245

ronverdonk

4,258

Expert 4TB

A sample for your DIV width question:
[html]<html><head></head><body>
<div id='test' style='width:300px;'>
</div>
<script type="text/javascript">
var w = document.getElementById("test").style.width;
alert('width='+w);
</script>
</body></html>[/html]
For an excellent tutorial on DOM usage, see link DOM Reference

Ronald :cool:

Dec 5 '06 #2

steven

143

100+

Thanks Ronald, but as I mentioned in my previous post - the dimension won't be specified, or at best, will be specified in percentage. I see that in your example, you specifically specified the width.

Is it possible to determine the dimensions without specifically setting the dimension in pixels?

Dec 5 '06 #3

steven

143

100+

Just posting the answer in case anyone else finds it useful.

Look at the clientWidth and clientHeight properties.

This is what I was looking for in my particular case. Something that would return the dimensions in pixels, even if they hadn't been set in a stylesheet, or if they were set using percentage values.

example:

Expand|Select|Wrap|Line Numbers

 
<div id="testing">lorem ipsum</div>

<script type="text/javascript">

  var test = document.getElementById("testing");

  alert("width: "+clientWidth+"px");

</script>

I believe you could use offsetHeight and offsetWidth too, though these also take into account possible scoll bars etc (I think). I still have more reading to do in Javascript.

Dec 7 '06 #4

nicky857

<div id="testing">lorem ipsum</div>
<script type="text/javascript">
var test = document.getElementById("testing");
var clientWidth = test.offsetWidth;
alert("width: "+clientWidth+"px");
</script>

Mar 13 '08 #5

mmurph211

try these functions

not sure if these functions work with scrollbars in view but worth a shot

Mar 27 '08 #6

by: delerious | last post by:

I need to determine an element's width and height in pixels (not including padding, border, and margin) in Javascript. The element will not have width or height styles specified. In Mozilla, I...

Javascript

Dynamic width of absolute positioned element

by: mike eli | last post by:

Hi, I have several absolute positioned elements inside an absolute positioned DIV. I would like one of the nested elements to have a dynamic width. I set it's left and right attributes to 5, so...

Javascript

Getting (and setting) a style value from a element that use a class

by: Michael Bierman | last post by:

Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does...

Javascript

Finding the value of "TOP" from prior block-containers used

by: TadPole | last post by:

Hi all, My main problems are::::::::: 1. Set a value within a block container that can be used and changed by subsequent templates/block-containers/tables etc.. 2. get/determine/find the...

.NET Framework

finding element width in dynamically allocated arrays

by: tricard | last post by:

Good day all, I have created a two dimensional array (matrix for my purposes) whose size is dynamically allocated. (i.e. rowSize and colSize are both taken as input, then malloc() is used to...

C / C++

create a div with same height & width as another element

by: toffee | last post by:

Hi all, Here's the situation: I have a table of data; and I would like to add a div with exactly the same height and width as the top-left header. The problem is as the data is dynamic and the...

Javascript

Returning checked checkbox values

by: cyberdawg999 | last post by:

Greetings all in ASP land I have overcome one obstacle that took me 2 weeks to overcome and I did it!!!!! I am so elated!! thank you to all who invested their time and energy towards helping me...

ASP / Active Server Pages

Element "GESCHLECHT" is undefined in FORM.

by: blackrunner | last post by:

ERROR in my Query?! ERROR: Element GESCHLECHT is undefined in FORM. i think everything ok. Maby somebody can help me here Element GESCHLECHT is undefined in FORM. The error occurred...

ColdFusion

Getting Values of NaN in Floor Are Ratio (FAR) Calculations

by: Catalyst159 | last post by:

I have a form which is used to calculate residential Floor Area Ratio (FAR). The form is structured into seven parts as follows: Part A: Maximum FAR and Floor Area: Part B: Gross Floor Area of...

Javascript

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Finding element dimension values width and height

Similar topics