[Greasemonkey] Monkey Do

Aaron Boodman zboogs at gmail.com
Wed Aug 17 16:12:22 EDT 2005


I haven't checked this out in depth yet, so I won't reply to that, but
I wanted to shout out about the forceStyle function real quick.

Somebody was just asking this at work recently, and I came up with a
slightly different solution. Basically, by creating a new element of
the target type in an iframe, you can be assured that it only has the
base browser style and user.css applied to it. Then you can compare
that "clean" element to the dirty one and reset any dirty style
properties.

================

function forceStyle(elm) {
  var iframe = document.createElement("iframe");

  with (iframe.style) {
    position = "absolute";
    visibility = "hidden";
  }

  document.body.appendChild(iframe);

  try {
    var iframeWin = iframe.contentWindow;
    var iframeDoc = iframe.contentDocument;
    var cleanElm = iframeDoc.createElement(elm.tagName);
    
    iframeDoc.body.appendChild(cleanElm);

    var cleanStyle = iframeWin.getComputedStyle(cleanElm, "");
    var dirtyStyle = window.getComputedStyle(elm, "");

    // compare cleanElm and elm. If any style properties differ, fix
them on elm.
    for (var p in elm.style) {
      var cleanVal = cleanStyle.getPropertyValue(p);

      if (cleanVal != dirtyStyle.getPropertyValue(p)) {
        elm.style[p] = cleanVal;
      }
    }
  } finally {
    document.body.removeChild(iframe);
  }
}

==================

This can of course be optimized by only creating one iframe and
reusing it, but it seems to work pretty good. Here's a test:

==================

<style type="text/css">
span { color:blue }
</style>
<p>I am a paragraph. <span id="monkey">I am a span.</span></p>
<button onclick="resetStyleDefaults(document.getElementById('monkey'))">click</button>

==================


-- 
Aaron


More information about the Greasemonkey mailing list