Comments on: CSS Computed Style

By: Dynamic Resize by Background Image | while($alive) LiveAndLearn();

Dynamic Resize by Background Image | while($alive) LiveAndLearn(); — Fri, 10 Sep 2010 16:14:23 +0000

[...] https://developer.mozilla.org/en/DOM/window.getComputedStyle http://blog.stchur.com/2006/06/21/css-computed-style http://www.hanselman.com/blog/jQueryToShipWithASPNETMVCAndVisualStudio.aspx [...]

By: BLARGH!! for the people » Get Computed Style in JavaScript

BLARGH!! for the people » Get Computed Style in JavaScript — Mon, 05 Apr 2010 10:26:21 +0000

[...] The computed style of an element incorporates external CSS (via stylesheets), inline styles and styles prescribed via JavaScript. It's most commonly used to get the default style of an element if it's not specifically assigned via styles, i.e. the default style that the browser gives an element. It's a very undocumented part of JavaScript engines, and, of course, there are multiple implementations. For more details, read this blog post. [...]

By: Rob

Rob — Sun, 15 Mar 2009 17:30:39 +0000

I had a similar problem the other day requiring the computed style in px not the currentStyle or style value The following function seems to correctly convert the style to px and ems and also handles styles in % and child elements where the parent is in % but the child is set to "auto".

http://www.strictly-software.com/CSSStyleObject.asp

By: Dynamic Background Image « My Vietnam

Dynamic Background Image « My Vietnam — Sun, 08 Feb 2009 11:09:16 +0000

By: Bookmarklet to de-cache CSS and images - Version 2 « Zeroed & Noughted

Bookmarklet to de-cache CSS and images - Version 2 « Zeroed & Noughted — Wed, 07 Jan 2009 23:35:38 +0000

[...] Getting the current values of styles set via CSS can be a pain. Unless they were explicitly set via JavaScript, we can only fetch them using currentStyle or getComputedStyle, complete of course with their own browser idiosyncrasies. Therefore, the first thing we need is a function to do this for us in a cross-browser fashion. I have amended a version I found on Incoherent Babble. [...]

By: Melody Pedzisai

Melody Pedzisai — Thu, 10 Jul 2008 20:47:03 +0000

Yes you are correct. Its a lot neater to do it that way. Thanks much for your help. I am all setup now with a few tweaks on the GWT side.

By: sstchur

sstchur — Wed, 09 Jul 2008 21:27:18 +0000

Melody,

Re: the property name has to be passed as an ecmascript binding value

That is true if you use .getPropertyValue, but I have found that using [styleProperty] has worked well for me in most cases, and all browsers use the property name in camelCase (without the dash), I believe.

By: Melody Pedzisai

Melody Pedzisai — Wed, 09 Jul 2008 16:16:26 +0000

OK so the site is defensive I cant show you the html. You get the idea

By: Melody Pedzisai

Melody Pedzisai — Wed, 09 Jul 2008 16:15:26 +0000

I noticed that the HTML is not showing so I am trying to paste it without surrounding with blocks

Here:

getComputedStyle table margin bug

table{margin:100px;}
.wrapper {
margin: 5px;
padding: 10px 10px 10px 10px;
background-color:#dfe8f6;/*#c3daf9*/
border: 1px solid magenta; /*TODO*/
display: block;
width: 1920px;width: 1920px !important;
height: 1022px;height: 1022px !important;
}

By: Melody Pedzisai

Melody Pedzisai — Wed, 09 Jul 2008 16:13:26 +0000

Thanks sstchur. I tried it in a watered down html page and it works just fine in IE and fireFox. I think there is a problem with the CSS styles on the element when I pass it from GWT to JavaScript using JSNI. It simply wont recognize any properties. Back to square one! The one thing that I would just add that seems not too clear in your code is that in fireFox, the property name has to be passed as an ecmascript binding value ie. border-bottom, whereas in IE you have to pass the property name without the dash ie. borderBottom. So I found some code somewhere for removing the dash and making the letter after it uppercase.





	        
	getComputedStyle table margin bug
	
	table{margin:100px;}
	.wrapper {      
		margin: 5px;
		padding: 10px 10px 10px 10px;    
		background-color:#dfe8f6;/*#c3daf9*/
		border: 1px solid magenta; /*TODO*/  
		display: block;
		width: 1920px;width: 1920px !important;
		height: 1022px;height: 1022px !important;
    }
	
    
	function getStyle(oElm, strCssRule){
	var strValue = "";
	if(document.defaultView && document.defaultView.getComputedStyle){
		strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
	}
	else if(oElm.currentStyle){
		strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
			return p1.toUpperCase();
		});
		strValue = oElm.currentStyle[strCssRule];
	}
	return strValue;
}

	




  
   
            
      
      
          
      
        
             YYYYYYYYYYYYYYYY
         

Actual margin is set to 100px

var foo = document.getElementById('wrapper');
alert('Padding-Right: '+ getStyle(foo, 'padding-right'));
alert('Margin-Right: '+ getStyle(foo, 'margin-right'));