Log in

View Full Version : passing style properties to function, howto?


shachi
11-24-2006, 05:39 PM
Hello everyone,
I was making some scripts when I came across a problem, can I pass style properties as an arguement? Something like this:



function stylize(prop, propval, obj){
document.getElementById("obj").style.prop = propval;
}
stylize(border, "1px solid red", "somediv");


It doesn't seem to work and I am tired of trying this. Does anyone know how to make this work? If so I would be greatly appreciated if you could help me with this.
coothead
11-24-2006, 06:10 PM
Hi there shachi,

The problem is that...


document.getElementById("obj").style.prop = propval;

...will not work. :eek:
I would suggest that, instead, you set the style changes as a class in your style sheet and then callthat...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#somediv {
width:100px;
height:100px;
}
.stuff {
border:1px solid red;
}
-->
</style>

<script type="text/javascript">
<!--
function stylize(obj,propval){
document.getElementById(obj).className=propval;
}
window.onload=function(){
stylize('somediv','stuff');
}
//-->
</script>

</head>
<body>

<div id="somediv"></div>

</body>
</html>
coothead
Twey
11-24-2006, 06:22 PM
The same types of problems apply to this code that apply to the code coothead posted in this thread (http://dynamicdrive.com/forums/showthread.php?p=62802#post62802). However, the basic idea is sound: it's much better to use a CSS class and the className property when dealing with this sort of thing.

However, I sense that the code you posted was just a demonstration, and perhaps your actual code does require you to modify a property directly. Every object in Javascript is also an associative array: that is to say,
style.propis exactly equivalent to
style['prop']As such, you can do:
function stylize(obj, prop, val) {
obj.style[prop] = val;
}
shachi
11-24-2006, 06:34 PM
That works great, Thanks a lot Twey. You completely got what I meant. Thanks a lot again.

Would this be a cross-browser code?



function stylize(obj, prop, val) {
document.getElementById(obj).style[prop] = val;
}


Brilliant!!!
Twey
11-24-2006, 06:37 PM
Yes, it should work with any current DOM-supporting browser.
shachi
11-24-2006, 06:52 PM
Oh, thanks again. By the way sorry to bother you but can I ask another question?

Can you tell me why this doesn't work?



var elem = document.getElementById("someelement");
while(elem.offsetLeft != 200){
elem.style.left += 2 + "px";
}


The browser stops the script everytime I try to run it.

Thanks a lot again.
Twey
11-24-2006, 07:01 PM
Because elem.style.left is a string. Say, for example, that its initial value was 5px. After the first iteration of your loop, it would be 5px2px. After another, it would be 5px2px2px.
You could use parseInt():
var elem = document.getElementById("someelement");
while(elem.offsetLeft !== 200)
elem.style.left = (parseInt(elem.style.left) + 2) + "px";However, it seems to me to be much simpler to set:
elem.style.left = "200px";
shachi
11-24-2006, 07:37 PM
Actually, I wanted to animate the element(without using setTimeout). Any ideas how I can do it? Thanks again.
ItsMeOnly
11-24-2006, 07:53 PM
you are on right track, however this is going to slow down the browser considerably on weaker hardware- you ask to iterate thru loop at every available speed, I'd suggest setting up an interval instead of while loop.
Twey
11-24-2006, 08:22 PM
Yes, setTimeout() or setInterval() is really the only way to do it.
shachi
11-25-2006, 07:43 AM
Oh, thanks again ItsMeOnly and Twey. I was just trying this because I could only no setTimeout function in a file called animator.js and only one in the run animation framework. Any ideas why? Anyways thanks again.