473,386 Members | 1,720 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

CSS element dimensions. A problem reading in javascript

Hi, I'm trying to read the width of a css absolutely positioned element

in javascript. If I use an id selector or a class definition then the
width is null, but if I use an inline style then it works. Can anyone
tell me why?

Andrew

Dec 9 '05 #1
2 1319
On 09/12/2005 13:37, awoodgate wrote:
Hi, I'm trying to read the width of a css absolutely positioned
element in javascript. If I use an id selector or a class definition
then the width is null, but if I use an inline style then it works.
Can anyone tell me why?


Spartanicus told you /why/ in ciwas: the style object represents the
inline style declarations applied to an element.

To access the computed CSS values of an element, you can use the
getComputedStyle method in certain browsers.

var o, dV, cS;

/* Test for method support */
if(document.getElementById && (dV = document.defaultView)
&& dV.getComputedStyle)
{
/* Obtain reference to element and computed style object */
if((o = document.getElementById('myElement'))
&& (cS = dV.getComputedStyle(o, null)))
{
/* cS now references the computed style object, and
* can be used like the style property of an element.
*/
alert(cS.width); /* '??px' */
}
}

However, IE doesn't support this. Though it does have its own
alternative, the currentStyle property, it is far inferior
(feature-wise) and may not be of much use. For instance, if an explicit
width property is not defined, rather than returning the actual width as
with getComputedStyle, it return 'auto'. Even if a width declaration
does exist, the property value is returned verbatim, meaning that it's
up to you to perform any conversion to pixels (if necessary) yourself.

var o, cS;

if(document.getElementById) {
if((o = document.getElementById('myElement'))
&& (cS = o.currentStyle))
{
/* ... */
}
}

You are more likely to benefit from using other properties, like
offsetWidth, to determine the dimensions.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Dec 9 '05 #2
Michael, thanks for your knowledge and time. offsetWidth is, as you
suggest, a much better idea.
Andrew

Dec 10 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

18
by: pmatos | last post by:
Hi, If I have set<unsigned int> s; will *(s.begin()) give me the minimum element of the set? If not, how can I retrieve it? Cheers, Paulo Matos
1
by: John | last post by:
I am rotating images of different dimensions. My problem is that when a new image is displayed in a new position which had an image of a different dimension, the old image is first stretched to the...
5
by: Patient Guy | last post by:
In my reading of the Strict and Transitional DTD for HTML 4.0, the table row (TR) elements are contained within table section elements: THEAD, TFOOT, and TBODY. The table section elements are...
21
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...
2
by: awoodgate | last post by:
Hi, I'm trying to read the width of a css absolutely positioned element in javascript. If I use an id selector or a class definition then the width is null. But if I use an inline style then it...
27
by: one man army | last post by:
Hi All- I am new to PHP. I found FAQTS and the php manual. I am trying this sequence, but getting 'no zip string found:'... PHP Version 4.4.0 $doc = new DomDocument; $res =...
3
by: Gabriele Farina | last post by:
Hi, I'd like to know where I can find some informations on how to retrive element dimensions in a cross browser whay. Until now I used offsetWidth and offsetHeight, but I know their are not...
3
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...
3
by: SM | last post by:
Hello, Im trying to access elements in my XML file using the JavaScript DOM but i'm not sure how. I use AJAX to access the XML and then use the responseXML property to access the XML file data. I...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
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...
0
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...
0
BarryA
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...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
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...
0
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...
0
Oralloy
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,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.