Jump to content

Getcomputedstyle Property Passing Parameter Problem


tinfanide
 Share

Recommended Posts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>var left;function setStyle(element,property){  if(window.getComputedStyle){    left = window.getComputedStyle(element,null).getPropertyValue(property);   }  else {    left = element.currentStyle.property;   }}function getStyle(){document.getElementById("show").innerHTML = left;}function init(){setStyle(document.getElementById("div"),"left");getStyle();}</script><style>#div {background-color: red;position: absolute;left: 100px;top: 100px;width: 100px;height: 200px;}</style></head><body onload="init()"><div id="div"></div><div id="show"></div></body></html>

My problem is why this script doesn't work, when I want to pass the property "left"?

function setStyle(element,property){  if(window.getComputedStyle){    left = window.getComputedStyle(element,null).property;   }  else {    left = element.currentStyle.property;   }} function getStyle(){document.getElementById("show").innerHTML = left;}function init(){setStyle(document.getElementById("div"),left);getStyle();} 

  • Like 2
Link to comment
Share on other sites

I assume you mean it does not work in IE! the property in left = element.currentStyle.property; is treated as a string value "left", instead of a variable left try using square brackets, to convert use left = element.currentStyle[property]; it acts similar to dot notation "."

Edited by dsonesuk
Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>var left;function setStyle(element,property){  if(window.getComputedStyle){    left = window.getComputedStyle(element,null).property;   }  else {    left = element.currentStyle[property];   }}function getStyle(){document.getElementById("show").innerHTML = left;}function init(){setStyle(document.getElementById("div"),left);getStyle();}</script><style>#div {background-color: red;position: absolute;left: 100px;top: 100px;width: 100px;height: 200px;}</style></head><body onload="init()"><div id="div"></div><div id="show"></div></body></html>

Well, now it does not work in both IE9 and FF6.

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>var left;function setStyle(element,property){  if(window.getComputedStyle){    left = window.getComputedStyle(element,null).property;   }  else {    left = element.currentStyle[property];   }}function getStyle(){document.getElementById("show").innerHTML = left;}function init(){setStyle(document.getElementById("div"),"left");getStyle();}</script><style>#div {background-color: red;position: absolute;left: 100px;top: 100px;width: 100px;height: 200px;}</style></head><body onload="init()"><div id="div"></div><div id="show"></div></body></html>

Yes, I did that wrong. But now the script still gives me the result likeleft = undefinedin both IE and FF.

Link to comment
Share on other sites

Your script is different from your very first, Ok! this is the one that works for me, I don't have IE9 *spit*, only IE8 *spit*, so I don't if its a version problem, but try setting a alert to identify which one it is using to retrieve value

<script>var left;function setStyle(element,property){  if(window.getComputedStyle){	left = window.getComputedStyle(element,null).getPropertyValue(property);   }  else {	left = element.currentStyle[property];   }}function getStyle(){document.getElementById("show").innerHTML = left;}function init(){setStyle(document.getElementById("div"),"left");getStyle();}</script> 

Edited by dsonesuk
Link to comment
Share on other sites

Maybe my first post was a bit misleading coz there were two scripts posted andthe first one struck ya instead of the second one.

  if(window.getComputedStyle){	    left = window.getComputedStyle(element,null).property;   }  else {	    left = element.currentStyle.property;   }

My problem is in this part:

left = window.getComputedStyle(element,null).property;

The above one does not work. If I use

left = window.getComputedStyle(element,null).getPropertyValue(property);

This one works. For the else statementEither .property or [property] works in IE.

Link to comment
Share on other sites

??? I don't know what problem is? to gather the information about a element with a specific id you would use getElementById(), not getElemenstByTagName(), the same applies for gathering property value, you would useleft = window.getComputedStyle(element,null).getPropertyValue(property); // works for other browsers FF, Chrome, Opera etcand not left = window.getComputedStyle(element,null).property;Nowleft = element.currentStyle.property;which is for browsers that don't recognise 'window.getComputedStyle' at present i.e IE, from what I can make out from your statement, works in IE9, But! from testing it myself, it does not in IE8 and below and returns 'undefined' value. What I also gathered is that left = element.currentStyle[property];works in all all versions of IE, so it might be better to use this instead, for backward compatibility of older browsers.

Link to comment
Share on other sites

var left;function setStyle(element,property){  if(window.getComputedStyle){	    left = window.getComputedStyle(element,null).getPropertyValue(property);   }  else {	    left = element.currentStyle[property];   }}function getStyle(){document.getElementById("show").innerHTML = left;}function init(){setStyle(document.getElementById("div"),"left");getStyle();}

Now I stick to [] instead of the period sign.Just a bit disorientated and annoyed by the browser-compatibility or work-for-all-version things,Especially by the IE series...I realise maybe I've been making some careless mistakes when I'm frequently testing different chunks of scripts within a short period of timeand asking questions in a misleading way, after all, throughout today, I myself am not very clear about what I'm doing with getComputedStyle,which may be just simply straightforward... :facepalm:

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...