|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
November 12th, 2003, 04:37 PM
|
||||
|
||||
|
Get CSS rule by ID?
Here is one way to get a CSS rule:
Code:
document.styleSheets[0].rules.item(0).style.getPropertyValue('width');
In the above example, I have to know exactly which element of the array contains the class. Is there an alternate way to get a CSS rule, just by ID? For example, if I have a DIV ID='bacon', then can I get the CSS rule for that DIV?
|
|
#2
November 13th, 2003, 10:17 AM
|
||||
|
||||
|
It is actually simpilar than you might think...
Code:
alert(document.getElementById('bacon').style.width)
That will make an alert box pop up with the style width of the element with the ID bacon (provided that style has been set). The width must be set for that ID it can't just be set for a class which that ID is a part of. in otherwords ---inside style sheet--- .myclass { width: 500px; } --inside html--- <DIV id="bacon" class="myclass"> If this is how you set the width of the DIV the javascript getElementById('bacon').style.width will not return a width. You must have either --- in javascript somewhere before your request --- getElementById('bacon').style.width = "400px" or --- in style sheet -- #bacon { width: 400px; } Then the code will return the correct width.
|
|
#3
November 13th, 2003, 02:36 PM
|
||||
|
||||
|
OK, I tried your suggestion:
Code:
<html>
<head>
<title>test</title>
<style type="text/css">
#bacon { width:400px; border:1px solid black; }
</style>
</head>
<body>
<div id="bacon">content here</div>
<script>
alert(document.getElementById('bacon').style.width);
</script>
</body>
</html>
But I get an empty alert message?
__________________
Hello, old friend... Last edited by khwang : November 13th, 2003 at 02:43 PM.
|
|
#4
November 13th, 2003, 02:57 PM
|
||||
|
||||
|
Okay... so I wasn't quite accurate in my description...
I didn't actully test when you set the style in a style sheet... But if you do this it will work... Code:
<html>
<head>
<title>test</title>
<SCRIPT language=javascript>
function setStyle() {
document.getElementById('bacon').style.width ="400px"
document.getElementById('bacon').style.border ="1px solid black"
}
</SCRIPT>
</head>
<body onLoad=setStyle()>
<div id="bacon">content here</div>
<script>
function showAlert(){
alert(document.getElementById('bacon').style.width);
}
</script>
<FORM>
<INPUT type=button onClick=showAlert() value="Show Width">
</FORM>
</body>
</html>
It just may not be what you want since I'm sure you would prefere to use a css style sheet rather than use javascript to define the styles. Because the style is not set until after the page loads you have to request the alert box after the page loads... hense the form button.
|
|
#5
November 13th, 2003, 03:11 PM
|
||||
|
||||
|
Quote:
Yes, I would prefer to use the CSS to set all styles. Then make some calculations (of height) based on the styles, then set height for another style. 
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Get CSS rule by ID? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
