Jump to content
tinfanide

Getcomputedstyle Property Passing Parameter Problem

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

i asked you to just change left = element.currentStyle[property]; but you changed setStyle(document.getElementById("div"),left); also, it should remain as setStyle(document.getElementById("div"), "left");

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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:

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...