sbortman Posted December 6, 2007 Share Posted December 6, 2007 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 More sharing options...
jesh Posted December 7, 2007 Share Posted December 7, 2007 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 More sharing options...
aalbetski Posted December 7, 2007 Share Posted December 7, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.