How to check if html element has some style properties set in style tag in IE6 - IE8?

Question

var bg_img = curr_elem.style.backgroundImage || curr_elem.style.getAttribute("background-image");

This returns null if curr_elem has this property set in <style> tag and not like this: style = "background-image: url(blah.png);" in element itself.

So, how I can know if some background-image is applied to this element in code?

We can use getComputedStyle in IE9+, but I need this for IE6+

<html>
    <head>
        <title>test clone elements</title>

        <style type ="text/css">
            #banner-map-225 .banner-map
            {
                background-image: url(test_bg.jpg);
            }
        </style>
    </head>
    <body>
        <div id = "banner-map-225" ></div>
        <div id = "inline_styled_div" style = "background-image: url(test_bg.jpg);" ></div>
        <input type = "button" value = "test first div" onclick = "alert(document.getElementById('banner-map-225').style.backgroundImage);" />
        <input type = "button" value = "test second div" onclick = "alert(document.getElementById('inline_styled_div').style.backgroundImage);" />
    </body>
</html>

http://stackoverflow.com/questions/18675828/getcomputedstyle-on-pure-javascript — Hearner, Jul 24 '15 at 11:32
@Hearner - for some wierd reason currentStyle.backgroundImage is set to "none", while this element actually has an background image that is set in ` — Kosmo零, Jul 24 '15 at 11:40
gotcha, early here, you could parse the innerHTML of the `style` tag and find a match on `id` or `className` from the element — WhiteHat, Jul 24 '15 at 12:08
@WhiteHat - ok, wait a litlle I will compose working example. — Kosmo零, Jul 24 '15 at 12:09

WhiteHat · Accepted Answer · 2015-07-24T13:16:01.480

kinda hokey but it should work...

  var theDiv = document.getElementById('banner-map-225');
  var styleArr = document.getElementsByTagName('STYLE');

  var startPos;
  var endPos;
  var textFromStyle;
  var theImageText;

  for (var i = 0; i < styleArr.length; i++) {
    // find the element selector
    if (styleArr[i].innerHTML.toUpperCase().indexOf(theDiv.id) === -1) {
      // use class name
      startPos = styleArr[i].innerHTML.toUpperCase().indexOf(theDiv.className.toUpperCase());
      if (startPos > -1) {
        startPos = startPos + theDiv.className.length;
      }
    } else {
      // use id
      startPos = styleArr[i].innerHTML.toUpperCase().indexOf(theDiv.id.toUpperCase());
      if (startPos > -1) {
        startPos = startPos + theDiv.id.length;
      }
    }

    if (startPos > -1) {
      // get everything after selector
      textFromStyle = styleArr[i].innerHTML.substring(startPos);

      // find the style def for the element
      startPos = textFromStyle.indexOf('{');
      endPos = textFromStyle.indexOf('}');

      if (startPos > -1) {
        textFromStyle = textFromStyle.substring(startPos, endPos + 1);

        // find bg image def
        startPos = textFromStyle.toUpperCase().indexOf('BACKGROUND-IMAGE');
        endPos = textFromStyle.indexOf(')');

        if (startPos > -1) {
          // get contents of url
          startPos = startPos + ('BACKGROUND-IMAGE').length;
          textFromStyle = textFromStyle.substring(startPos, endPos + 1);
          startPos = textFromStyle.toUpperCase().indexOf('URL(') + ('URL(').length;
          endPos = textFromStyle.indexOf(')');
          if (startPos > -1) {
            theImageText = trimString(textFromStyle.substring(startPos, endPos));
            break;
          }
        }
      }
    }
  }

  // here's your image
  if (theImageText) {
    alert(theImageText);
  }

  // no trim in early IE
  function trimString(sText) {
    return sText.replace(/^\s+|\s+$/g, '');
  }

This... is... very... weird solution, but it's really working while no other solutions are found. Thank you. — Kosmo零, Jul 24 '15 at 12:59
Found a minor issue with the bg image section, check the edit. If we're talking IE6, there is no other way. — WhiteHat, Jul 24 '15 at 13:16

How to check if html element has some style properties set in style tag in IE6 - IE8?

1 Answers1