PDA

Click to See Complete Forum and Search --> : JavaScript-CSS Interaction

mercury7
09-27-2004, 11:56 PM
If I were to use the following code:

document,getElementById('someDiv').style.height='150px';
document,getElementById('someDiv').style.width=
document,getElementById('someDiv').style.height/2;


would it work?

The css value is a string with "px" at the end, which is not a number value. I tried this, and it doesn't work with Mozilla. So, how am I supposed to do math my CSS?
CSW800
09-28-2004, 12:55 AM
It won't work because you put commas between doument and getElementById() (put .'s instead)
fredmv
09-28-2004, 01:00 AM
Originally posted by CSW800
It won't work because you put commas between doument and getElementById() (put .'s instead) And that's only half of the problem. We'll also need to extract the number out of the CSS property. This can be done using parseInt, as shown below.document.getElementById('someDiv').style.width = parseInt(document.getElementById('someDiv').style.height, 10)/2 + 'px';
Charles
09-28-2004, 03:55 AM
You don't need "parseInt" to turn the number into a string; that will happen automatically when it is concatenated with "px". And you don't need it to make the numnber an integer; CSS handles numbers with decimal parts. But you might want to consider that in the DOM level 1 you can't do that; It's only in levl 2 that you can play directly with styles. The indirect method would be, at least a little bit, more supported. And the old way makes more semantic sense and is easier to maintain.

document.getElementById('someDiv').className = someOtherClass

Of course, sometimes what you want to do with the new class cannot be expressed with CSS. That's a good time to go with level 2.
fredmv
09-28-2004, 12:14 PM
Charles, I think there is a bit of confusion going on here. Indeed, I'm aware the the concatenation of another string will autocast any other data type to the string datatype in JavaScript. I'm also aware that we don't need to turn the number into an integer.

However, what I was getting at is the value that we're trying to work with here has the CSS unit "px" attached to it. Thus, we can't maniplate the value of this property without getting the actual amount that it is set to (read: only the number value). Therefore I suggested using parseInt to extract this value.

Consider the following example to further show what I'm talking about.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#foo {
padding: 1em;
background: #eee;
border: solid #505050 1px;
}
</style>
<script type="text/javascript">
onload = function()
{
var el = document.getElementById('foo');

alert('original width: ' + el.style.width);
alert('Trying without parseInt...');
try {
el.style.width = el.style.width / 2 + 'px';
} catch(e) { }
alert('result: ' + el.style.width);
alert('Trying with parseInt...');
el.style.width = parseInt(el.style.width, 10) / 2 + 'px';
alert('result: ' + el.style.width);
}
</script>
</head>
<body><div id="foo" style="width: 500px">foo</div></body>
</html>
mercury7
09-28-2004, 04:58 PM
Yes, "parseInt(string, base)" is the solution! Thank you.
Charles
09-28-2004, 05:21 PM
Forgive me, I mis-read your post.