Finding element dimension values width and height

143 New Member

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 Reply

15267

ronverdonk

4,258

Recognized Expert Specialist

A sample for your DIV width question:
[html]<html><head></head><body>
<div id='test' style='width:30 0px;'>
</div>
<script type="text/javascript">
var w = document.getEle mentById("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

New Member

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

New Member

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

New Member

<div id="testing">lo rem ipsum</div>
<script type="text/javascript">
var test = document.getEle mentById("testi ng");
var clientWidth = test.offsetWidt h;
alert("width: "+clientWidth+" px");
</script>

Mar 13 '08 #5

mmurph211

New Member

try these functions

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

Mar 27 '08 #6

Similar topics

21548

How do I calculate an element's width/height?

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 know I can use document.defaultView.getComputedStyle() to do this. IE does not support document.defaultView.getComputedStyle(). It supports offsetWidth/offsetHeight, but those include the padding and border. IE also supports...

Javascript

4632

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 the the element should have a width = parentWidth - 10; This is the desired behaviour, but it won't work. I still have to specify a width or the element has a width of 0. Setting the width to '100%' doesn't give me the desired effect; it takes...

Javascript

4006

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 nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari. THanks very much, Michael

Javascript

2219

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 setting that tell the process that the new top of the document region is now at the end of the last block-container used, this must be set in that last block container. 3. find the value used in the 'top" setting on the prior

.NET Framework

1822

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 dynamically allocate the required memory). After the matrix is returned to main I want to pass it to a function, printMatrix() and have it displayed on screen. However, I do not want to send the rowSize and colSize arguments; instead I want to have...

C / C++

2596

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 header cell is set to nowrap, the width always varies. I tried to do some research but everything is a bit confusing for a novice as myself. How can i use JS to find out what the dimension of the top-left header cell

Javascript

4105

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 with my problems. Now for my new little problem,I had a problem posting the values from checkbox fields to a database and thats the obstacle I overcame. Now the second part is my new problem is that I want that the next time that page loads for...

ASP / Active Server Pages

4314

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 in \anmeldung2.cfm: line 404

ColdFusion

2631

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 the main floors of the main house: Part C: Gross Floor Area of the basement or cellar: Part D: Gross Floor Area of the attic:

Javascript

9710

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10593

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10340

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

7626

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6858

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5527

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5663

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4304

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3000

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General