Jump to content

Getting CSS property values


sbortman
 Share

Recommended Posts

I would like to get the url that is specified in the background-image property. I have specified a background image within a <DIV id="divMap"> tag using a file level style specification (e.g. using the <style> tag within the .asp page). <style> div#anImage { background-image: url(/maps/theMap.gif); }</style>Based on what I think I understand from the W3schools CSS tutorials I figured a Javascript function looking something like the following would popup the the url string:function getImageInfo() { var div = document.getElementById('divMap'); alert(div.style.backgroundImage);}But it doesn't work!!Do any of you gentlemen have any suggestions??My ultimate goal is to dynamically get the image (gif) file's actual dimentions (naturalWidth, naturalHeight) and use this size information to dynamically re-size the image's container to fit the image. I have about 100 images of countries I must display and they are all sized a little different.Thank You

Link to comment
Share on other sites

The easiest way would be to specify the background image using javascript in the first place, rather than css. Then you could get at the values as you would expect:

<div id="test">hello</div><script>document.getElementById("test").style.backgroundImage = "url(http://www.w3schools.com/images/w3default80.jpg);"alert(document.getElementById("test").style.backgroundImage);</script>

Barring that, take a look at this article on quirksmode (http://www.quirksmode.org/dom/changess.html). Using that information, and a bit of parsing/looping through all the properties, you can eventually get at the css rules:

<html><head><style type="text/css">#test { background-image: url(http://www.w3schools.com/images/w3default80.jpg) }</style></head><body><div id="test">hello</div><div id="out"></div><script>var sheet = document.styleSheets[0];var rule = (sheet.cssRules) ? sheet.cssRules[0] : sheet.rules[0];alert(rule.style.backgroundImage);</script></body></html>

Link to comment
Share on other sites

investigate currentStyle (for IE) or getPropertyValue (for FF).example from a project:

		var oTop = document.getElementById("top")		var oBody = document.getElementsByTagName("body")[0]		var oBottom = document.getElementById("bottom")		var topH 	= oTop.offsetHeight;		var bodyH	= oBody.offsetHeight 		var ua = window.navigator.userAgent		var msie = ua.indexOf ( "MSIE " )		if ( msie > 0 )		{			var bpb 	= Number(document.getElementById("bottom").currentStyle.paddingBottom.match(/\d+/))			var bpt 	= Number(document.getElementById("bottom").currentStyle.paddingTop.match(/\d+/))			document.getElementById("bottom").style.height = bodyH  - topH - (bpb + bpt)		}		else		{			var oBottomStyle = window.getComputedStyle(oBottom, "")			var sBpb 	= oBottomStyle.getPropertyValue("padding-bottom")			var sBpt 	= oBottomStyle.getPropertyValue("padding-top")			var bpb		= Number(sBpb.match(/\d+/));			var bpt		= Number(sBpt.match(/\d+/));		}		oBottom.style.height = (bodyH  - topH - (bpb + bpt)) + "px"

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...