Extarcting style element width

**Barq** · Oct 5, 2003 17:01

Hi .

For example I have this style:

.test {
width:150px;
}

is there a way to write javascript code to extract the value of "test" width ?

Thanks

**awestmoreland** · Oct 6, 2003 04:50

Not sure about extracting it from the CSS itself, however can't you simply check the width of any page elements that are using that class?

F'rinstance, if you've got the following div:

Code:

<div id="mydiv" class="test">Hello world</div>

Then find out the width of the div (and therefore the CSS setting) using:

Code:

var mydivWidth=document.getElementById('mydiv').style.width;

Andy

**Paul O'B** · Oct 6, 2003 13:25

Hi,

Here's a useful link.

http://www.javascriptkit.com/dhtmltu...lcascade.shtml

I think you may need to use something like this to find the width of an element with an ID of test:

Code:

<script type="text/javascript">
var x=document.getElementById('test');
alert(x.currentStyle.width);
</script>

But then I never was much good at javascript

.

Paul

**Barq** · Oct 6, 2003 22:52

Thanks for your replay.
Let me clear my idea, I want to get the width of one element from a style sheet and use its value and assign it to other element using expression in css such as:

Code:

 #main {
width:100px;
} 
#test{
width: expression(document.getElementById('main').style.width+150+"px");
}

This code is not working. Is there a way to achieve this goal ?

Thanks,,

**Paul O'B** · Oct 7, 2003 03:16

Hi,

You can't mix javascript expressions with the stylesheet.

I think you'd have to something like this ; (although as I mentioned before my javscript is pretty basic.)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#main {
width:100px;
background:red;
} 
#test{
width: auto;
background:yellow;
}
</style>
</head>
<body>
<div id="main">This is 100px wide</div>
<div id="test">This is 250px wide</div>
<script type="text/javascript">
var x=document.getElementById('main').currentStyle.width;
x=parseInt(x, 10) + 150;
x=x+"px";
document.getElementById('test').style.width=x;
</script>
</body>

Paul

**awestmoreland** · Oct 7, 2003 03:43

That's the kind of thing I was suggesting above, although not very clearly apparently

**Paul O'B** · Oct 7, 2003 04:10

Hi,

That's the kind of thing I was suggesting above, although not very clearly apparently

I knew what you meant

That's why I copied it

Paul

**Barq** · Oct 7, 2003 04:12

Thanks for your comments,

I use this

Code:

 <style>
#main {
width:100px;
background: Aqua;
} 
#test{
width: expression(document.body.clientWidth/2 +"px" );
background: Fuchsia;
}

</style>

And Its works fine and I thought that I can access to stylesheet elements properties such as width and height.

So is there a way to define vaiables is css like I define variable x and assign it to 100

x= 100

Then I use it in stylesheet without using javascript -Just using exprerssion-

Code:

 <style>

#test{
width: expression(x+100+"px" );
background: Fuchsia;
}

</style>

Thank you

**Paul O'B** · Oct 7, 2003 04:51

Hi,

Sorry i'd forgotton about IE's expressions (as I've never used them).

I can't offer any advice but there might be something useful on this page for you:

http://msdn.microsoft.com/library/de...dude061198.asp

Paul

**Barq** · Oct 7, 2003 05:31

Thanks all for your help

User Tag List

Thread: Extarcting style element width

Thread Tools

Display

Extarcting style element width

Bookmarks

Bookmarks

Posting Permissions