Snippets code from my daily experience

April 7, 2008

How to get element style values from XUL (or HTML)

Filed under: css,table2clipboard,xul — dafi @ 8:15 pm

I’m working to my Extend Firefox 2 Runner Up winner Table2Clipboard.

Many users tell me to add a simple feature, exclude cells having style display: none.

The solution is so straightforward that I could not believe after initial implementation.

You can style an element using CSS selectors

.invisible {
display: none;
}

<span id=“invisibleSpan” class=“invisible”>I’m invisible man</span>

or using the attribute style attribute

<span id=“invisibleSpan” style=“display : none”>I’m invisible man</span>

These two ways can both simply handled using getComputedStyle

var spanElement = document.getElementById(“invisibleSpan”);
var style = spanElement.ownerDocument.defaultView.getComputedStyle(spanElement, null);
var displayValue = style.getPropertyValue(“display”);

That’s all folks!!

Obviously you can use any CSS attribute not only display.

Pay attention to ownerDocument.defaultView, you should use window.getComputedStyle() but under XUL this doesn’t return what you expect.

getComputedStyle can be used in normal unprivileged HTML code, too.

getComputedStyle is a W3C standard and is present on Internet Explorer, Opera and Safari, too.

Little things make developer life easier.

About these ads

The Rubric Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: