SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Mar 19, 2006, 21:01 #1
- Join Date
- Jul 2003
- Location
- Melbourne, Australia
- Posts
- 579
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Getting Style Information from an Element?
Hi guys,
I have found a bug in my code that I can't resolve. I am retrieving some style information from an element and haver found differences in the results depending on how the styles are applied.
Here is my test Javascript function:
Code:window.onload = function () { alert(document.getElementById('p1').style.backgroundColor); }
HTML Code:<p id="p1" style="background-color: #00ff00;">Paragraph 1</p>
HTML Code:<style type="text/css"> #p1 { background-color: #00ff00; } </style> <p id="p1">Paragraph 1</p>
Regards,
Jordan
-
Mar 19, 2006, 21:20 #2
- Join Date
- Mar 2006
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What is it you are trying to do? Maybe I can help.
-
Mar 19, 2006, 21:37 #3
- Join Date
- Jul 2003
- Location
- Melbourne, Australia
- Posts
- 579
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I am trying to get a style from an element for use in my application, which should be simple enough, but it will not retrieve the style if it is not specified inline.
-
Mar 19, 2006, 22:27 #4
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Mar 19, 2006, 22:38 #5
- Join Date
- Jul 2003
- Location
- Melbourne, Australia
- Posts
- 579
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Kravvitz.
This seems utterly ridiculous that you cannot access an elements style properties unless they are declared inline. Will try and find another workaround, thank you.
Regards,
Jordan
-
Mar 19, 2006, 22:44 #6
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Did you not read that whole page?
The style object reflects the contents of the style attribute. It's that simple. I know, it would be nice if the style object reflected the styles that are actually being applied to the element, but that's just not the way they designed it.We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Mar 19, 2006, 22:53 #7
- Join Date
- Jul 2003
- Location
- Melbourne, Australia
- Posts
- 579
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry Kravvits, just venting at how silly this seems. One would think that if you request the style.x value from an element, you would get that value regardless of how it is set.
Am testing the way PPK mentions and see how it goes.
Regards,
Jordan
-
Mar 19, 2006, 23:47 #8
- Join Date
- Jul 2003
- Location
- Melbourne, Australia
- Posts
- 579
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Here is how I have solved that problem, can anyone see any problems with this?
Code:function getStyle(id, property) { var element = document.getElementById(id); if(getCamelizedStyle(id, property) == null) { var style = getCamelizedStyle(id, camelize(property)); } else { var style = getCamelizedStyle(id, property); } return style } function getCamelizedStyle(id, property) { var element = document.getElementById(id); if (element.currentStyle) { var style = element.currentStyle[property]; } else if (window.getComputedStyle) { var style = document.defaultView.getComputedStyle(element,null).getPropertyValue(property); } return style; }
Regards,
Jordan
Bookmarks