473,783 Members | 2,516 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

retreiving fontSize and/or DIV dimensions from linked stylesheet

OK, I am learning my way around the new DOM, but I am still at a loss
on finding a few things.

I have an HTML document that links to a stylesheet.

/* START STYLESHEET EXAMPLE */
/* styles/mystyles.css */
..leftnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
font-weight: bold;
}
..leftnav A {
font-weight: bold;
text-decoration: none;
}
/* END STYLESHEET EXAMPLE */

I am using DIV/SPAN combinations to create some floating links built
into 3D layers on the webpage. For example:

<!-- START HTML SNIPPET -->
<link id="styles" href="styles/mystyles.css" rel="stylesheet "
type="text/css">

<div id="lfnav">
<span id="lflink01" style="position :absolute; left:85px; top:107px"
class="leftnav" >
<a href="javascrip t:void(0);" onClick="getLin k(foo);">Foo</a>
</span>
</div>
<!-- END HTML SNIPPET -->

Note that I am only assigning the upper left position of the
associated SPAN style. Ultimately, I am interested in dynamically
placing these based on the number and size of the links put in place.

This would mean that I would have to have a good idea what the width
and height of each DIV (after populated with text) was. I tried using
the associated

document.getEle mentById('lflin k01').style.wid th
and
document.getEle mentById('lflin k01').style.hei ght

but they come back basically null (I used an alert and the alert came
up blank).

The other thing I considered was calculating at least the height based
on the font size. (although the former would be preferred to get
'both' dimensions) Needless to say, I am now curious how to access my
styles as well.

So this brings me to two questions:

1) Can I retreive the here-to-fore unknown width & height of the DIV
'after' it is populated with text of otherwise undetermined
dimensions.

2) How do I access the individual style elements such as fontSize
(such as the above example) where the styles are linked in a
stylesheet?

Any help is greatly appreciated!!!

Catherine Lynn
Jul 20 '05 #1
4 3319
I am not an expert on these height/width issues, but
you might check out .clientWidth for IE and .offsetWidth
for NN while you are waiting for a more proper answer.

Csaba Gabor

"Catherine Lynn Smith" <kl*****@hotmai l.com> wrote in message news:5f******** *************** ***@posting.goo gle.com...
OK, I am learning my way around the new DOM, but I am still at a loss
on finding a few things.

I have an HTML document that links to a stylesheet.

/* START STYLESHEET EXAMPLE */
/* styles/mystyles.css */
.leftnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
font-weight: bold;
}
.leftnav A {
font-weight: bold;
text-decoration: none;
}
/* END STYLESHEET EXAMPLE */

I am using DIV/SPAN combinations to create some floating links built
into 3D layers on the webpage. For example:

<!-- START HTML SNIPPET -->
<link id="styles" href="styles/mystyles.css" rel="stylesheet "
type="text/css">

<div id="lfnav">
<span id="lflink01" style="position :absolute; left:85px; top:107px"
class="leftnav" >
<a href="javascrip t:void(0);" onClick="getLin k(foo);">Foo</a>
</span>
</div>
<!-- END HTML SNIPPET -->

Note that I am only assigning the upper left position of the
associated SPAN style. Ultimately, I am interested in dynamically
placing these based on the number and size of the links put in place.

This would mean that I would have to have a good idea what the width
and height of each DIV (after populated with text) was. I tried using
the associated

document.getEle mentById('lflin k01').style.wid th
and
document.getEle mentById('lflin k01').style.hei ght

but they come back basically null (I used an alert and the alert came
up blank).

The other thing I considered was calculating at least the height based
on the font size. (although the former would be preferred to get
'both' dimensions) Needless to say, I am now curious how to access my
styles as well.

So this brings me to two questions:

1) Can I retreive the here-to-fore unknown width & height of the DIV
'after' it is populated with text of otherwise undetermined
dimensions.

2) How do I access the individual style elements such as fontSize
(such as the above example) where the styles are linked in a
stylesheet?

Any help is greatly appreciated!!!

Catherine Lynn

Jul 20 '05 #2
Thanks - actually I found that in a similar but unrelated thread not
too long after posting the first message and it seems to be reasonably
accurate enough to suit my needs. I also realized that I might want
to fix at least the width anyway to avoid having to manually place
'br' tags.

I also found currentStyle from the IE DOM but it's not supported in NN
currently and is still debateable if it will make the W3C apparently.
currentStyle appears to be a calculated property and actually
retrieves the information from the DIV rather than off the stylesheet.

So if anyone can fill me in on how to access the various style
settings from the linked stylesheet, I would still appreciate it.
Even the DHTML definative guide from O'Reilly fails to elaborate down
the stylesheet bubble on their heirarchial tree...

KL

"Csaba2000" <ne**@CsabaGabo r.com> wrote in message news:<bk******* @dispatch.conce ntric.net>...
I am not an expert on these height/width issues, but you might
checkout .offsetWidth for NN "Catherine Lynn Smith" <kl*****@hotmai l.com> wrote in message news:5f******** *************** ***@posting.goo gle.com...
I have an HTML document that links to a stylesheet.

/* START STYLESHEET EXAMPLE */
/* styles/mystyles.css */
.leftnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
font-weight: bold;
}
.leftnav A {
font-weight: bold;
text-decoration: none;
}
/* END STYLESHEET EXAMPLE */

I am using DIV/SPAN combinations to create some floating links built
into 3D layers on the webpage. For example:

<!-- START HTML SNIPPET -->
<link id="styles" href="styles/mystyles.css" rel="stylesheet "
type="text/css">

<div id="lfnav">
<span id="lflink01" style="position :absolute; left:85px; top:107px"
class="leftnav" >
<a href="javascrip t:void(0);" onClick="getLin k(foo);">Foo</a>
</span>
</div>
<!-- END HTML SNIPPET --> The other thing I considered was calculating at least the height based
on the font size. (although the former would be preferred to get
'both' dimensions) Needless to say, I am now curious how to access my
styles as well.

2) How do I access the individual style elements such as fontSize
(such as the above example) where the styles are linked in a
stylesheet?

Jul 20 '05 #3
kl*****@hotmail .com (Catherine Lynn Smith) writes:
I also found currentStyle from the IE DOM but it's not supported in NN
currently and is still debateable if it will make the W3C apparently.
currentStyle appears to be a calculated property and actually
retrieves the information from the DIV rather than off the stylesheet.
The W3C DOM has a different method:

var elemRef = document.getEle mentById("myEle mId");
var cstyle = document.defaul tView.getComput edStyle(elemRef ,null);

This is supported by Mozilla (and therefore also Netscape 6+) and by
Opera 7.20 (still in beta).
So if anyone can fill me in on how to access the various style
settings from the linked stylesheet, I would still appreciate it.
Even the DHTML definative guide from O'Reilly fails to elaborate down
the stylesheet bubble on their heirarchial tree...


Acessing the style sheets themselves is different from accessing the
computed style.

var sheet = document.styleS heets[0]; // first style sheet
var rule = (sheet.rules || sheet.cssRules)[0]; // first rule
alert(rule.sele ctorText);
rule.style.colo r = "red";

The W3C DOM name for the rules collection is "cssRules", but IE uses
"rules".
Works in Mozilla and IE.
For getting the height of an element, any browser that supports
accessing the computed style, also have a non-standard property
called "offsetHeig ht" on the element.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4
Lasse Reichstein Nielsen <lr*@hotpop.com > wrote in message news:<k7******* ***@hotpop.com> ...
kl*****@hotmail .com (Catherine Lynn Smith) writes:

For getting the height of an element, any browser that supports
accessing the computed style, also have a non-standard property
called "offsetHeig ht" on the element.


I'm having trouble getting element heights in Netscape 7. The page in
question has these styles:

menu { background-color: #FFEEEE; }
a.menu { background-color: #FFEEEE; display: block; width: 100%;
text-decoration: none; color: #000000; font-weight:bold;
font-size:12px; }
a:hover.menu {background-color: #000000; color: #FFEEEE}

and this HTML:

<table border="1" cellspacing="0" cellpadding="0"
bgcolor="#ffeee e" bordercolor="#c c0000">
<tr>
<td ><span id="menu1" style="position : relative;">
<a onmouseover="op enMenu(1);" class="menu"
href="javascrip t:void(0);">Com mands</a></span></td>
</tr>
</table>

Inside openMenu, the following expressions are all zero:

document.getEle mentById("menu1 ").clientHe ight
document.getEle mentById("menu1 ").offsetHe ight
document.getEle mentById("menu1 ").scrollHe ight

and the expression below equals "auto":

document.defaul tView.getComput edStyle(documen t.getElementByI d("menu1"),
"").getProperty Value("height") )

If I remove "display: block;" from the "menu" style, these
expressions:

document.getEle mentById("menu1 ").offsetHe ight
document.getEle mentById("menu1 ").scrollHe ight

return 14, which is the correct value. However, without "display:
block;" the hyperlink background doesn't fill the span (and hence the
table cell).

How can I get the actual height in pixels of the "menu1" span?

To view the actual page, browse:
http://www.interlacken.com/dhtmlmenu/dhtmlmenu.htm

Jim Buyens
Jul 20 '05 #5

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

Similar topics

1
1555
by: Fabian | last post by:
Assuming you are creating a page that *requires* (no flames please) javascript and style sheets, is it more efficient to specify image dimensions as html or as part of the style sheet? The images will NOT be dynamically resized in this page. -- -- Fabian Visit my website often and for long periods!
5
2279
by: aamirghanchi | last post by:
Hi, I have a very simple html that has a linked stylesheet. According to the style sheet both blocks of text should be displayed in the font xx-small. but only one (DIV or SPAN) at a time is displayed in this font and that would be the one that is at the end of the stylesheet file. for example if DIV selector is the last block in MyStylesheet.css then the corresponding text in the DIV tag in the html will be small font. If we swap the...
0
895
by: fred | last post by:
I have applied a stylesheet to 5 forms, and when I run the application all forms behave correctly, however in design mode one of the forms uses a font that is barely readable, maybe 3 or 4 point The other forms appear correctly in the designer I have tried removing and reapplying the stylesheet but the problem stays. any ideas fred
1
1412
by: JezB | last post by:
How can I dynamically change an external stylesheet link (or import) at runtime in server-side code ? I don't want to use a placeholder as in <link id="myTheme" rel="stylesheet" type="text/css" href="<%=CurrentTheme%>"> because this requires that I declare a public string (CurrentTheme) in every page. I want to do it more transparently, to work with any page that links
1
1530
by: tshad | last post by:
I am running a program to put a captcha image on my string and am trying to make sure all the characters fit. The problem is the size seems to be wrong. What I am doing is starting from the rectangles' height + 1 (not sure why I would use that as a starting point) then I loop through subtracting the value by 1 until the size I get back from MeasureString is less than the rectangle width.
1
2462
by: Mentat | last post by:
In the description below ??? marks specific problem areas. Any help is appreciated. Required ======== A method to detect the width and height values of a <DIV... element. Since there are two ways to "style" a DIV, it should be noted that a CSS file is used in this case. The same is required for an <IMG... element contained within the DIV.
4
22082
by: jnag | last post by:
Hello, Through an onClick() event, I have an inline function to change the font size of the page (actually, I need to do this for the entire website). I have this defined in the header.cfm file as: onclick="document.body.style.fontSize='50%';" This does not work at all for some reason. Whereas,
3
1214
gomescoder
by: gomescoder | last post by:
HI TSDN Pals, I am trying to create an object to modify its colour, size, message attributes on the fly using OOP concept... Everything works fine with this code but the problem is the font size is not changing. I have highlighted the problem area in the below snippet. // Start of the Snippet -------------------------------
0
10313
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, 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...
0
10147
jinu1996
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...
1
10081
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9946
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7494
isladogs
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...
0
5378
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...
0
5511
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3643
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2875
bsmnconsultancy
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...

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.