Accessing background images from style sheets

Discussion in 'JavaScript' started by Blarg, Jul 22, 2008.

0
  1. #1
    I'm having a problem accessing style attributes on some pages. I'll use google as an example - http://www.google.ca/search?client=firefox-a&rls=com.ubuntu%3Aen-US%3Aofficial&channel=s&hl=en&q=test&meta=&btnG=Google+Search. I'm trying to pick up all of the pairs of tags / background images on a page with a bookmarklet.

    Here's the code - you just copy+paste it into the url of your window:

    javascript:

    var str = '';

    var tags = document.getElementsByTagName('*');

    for (var x = 0; x < tags.length; x ++) {
    str = str + '<br>: ' + tags[x].id + " : " + tags[x].style.background;
    }


    This generates a list of all of the tags on the page, and their background. However, the background shows up blank, even though in the source code, there is a style tag with lines like:
    #logo span{background:url(/images/nav_logo3.png) no-repeat;height:26px;overflow:hidden}

    So the span inside of the link with id logo should have a background, but its not showing up. There span definatly has the background attribute, because you can see the logo displayed. Why isn't it showing up in the list?
     
    Blarg, Jul 22, 2008 IP
  2. VishalVasani

    VishalVasani Peon

    Messages:
    560
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hello

    Try Following statment.

    document.getElementById("logo").style.backgroundImage
    Code (markup):
    Check below url may help u?
    http://novitskisoftware.com/demos/gettingAllElements/
     
    VishalVasani, Jul 22, 2008 IP
  3. VishalVasani

    VishalVasani Peon

    Messages:
    560
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hello,

    Below is the working example for your problem check it out.

    
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function findhead1()
{
    var tag, tags;
    tags = "The tags in the page are:"
    for(i = 0; i < document.all.length; i++)
    {
        tag = document.all(i).style.backgroundImage;
        tags = tags + "\r" + tag;
    }
    document.write(tags);
}

//  -->
</script>
</head>
<body onload="findhead1()">
<h1>Heading One</h1>

<span id="testing" style="background-image:url(flexigrid/flexigrid/accept.png)">ss</span>

</body>
</html>
    Code (markup):
     
    VishalVasani, Jul 22, 2008 IP