PDA

View Full Version : JavaScript and CSS

wiffles
04-09-2004, 02:29 PM
Can I use JavaScript to make any real-time changes to style sheet properties?
agent002
04-09-2004, 02:33 PM
link (http://www.htmlforums.com/showthread.php?s=&postid=171629) :)
wiffles
04-09-2004, 02:54 PM
The document.writeIn way should work for me. But will it bog up the page if I do it 60 times a second? :D
agent002
04-09-2004, 03:00 PM
umm, yes. What are you attempting to do, make some text flash wildly? You could change its style as an inline property too, like
document.getElementById('element_id').style.color = '#ff0000';
?
wiffles
04-09-2004, 03:07 PM
I'm trying a test for it but it doesn't work...

<html>
<head><title>colour test!</title>
<style type="text/css">
.coloured {color: black}
</style>
<script language="JavaScript">
<!-- hide
function changeColour(colour) {
document.writeln('<style type="text/css">');
document.writeln('.coloured {color: ' + colour + '}');
document.writeln('</style>');
}
// and stop. -->
</script>
</head>
<body>
Normal and boring text.<p>
<span class=coloured>colours colours colours</span><p>
<form name="stuff">
<button name="redb" onClick="javascript:changeColour('red')">red!</button>
<button name="greenb" onClick="javascript:changeColour('green')">green!</button>
<button name="blueb" onClick="javascript:changeColour('blue')">blue!</button>
<button name-"wtf" onClick="javascript:changeColour('#63fb8c')">63FB8C!</button>
</form>
</body></html>
agent002
04-09-2004, 03:38 PM
As you call the function from a javascript: link and it contains a document.write(), the browser gets anxious as it doesn't know where to print it. So it rewrites the entire document with the <style></style> code. But instead, try this:
<html>
<head><title>colour test!</title>
<style type="text/css">
.coloured {color: black}
</style>
<script language="JavaScript">
<!-- hide
function changeColour(colour) {
document.getElementById('coloured').style.color = colour;
}
// and stop. -->
</script>
</head>
<body>
Normal and boring text.<p>
<span id=coloured>colours colours colours</span><p>
<form name="stuff">
<button name="redb" onClick="javascript:changeColour('red')">red!</button>
<button name="greenb" onClick="javascript:changeColour('green')">green!</button>
<button name="blueb" onClick="javascript:changeColour('blue')">blue!</button>
<button name-"wtf" onClick="javascript:changeColour('#63fb8c')">63FB8C!</button>
</form>
</body></html>
wiffles
04-09-2004, 03:54 PM
It doesn't work... (nothing happens in Mozilla or IE)

No, it works now (after much fiddling) but as soon at it changes, the page reloads... Something to do with using buttons? (for the final javascript/css thing I won't be using buttons)

Second edit: Changed buttons for links. No problem!

<html>
<head><title>colour test!</title>
<style type="text/css">
#coloured {color: black}
</style>
<script language="JavaScript">
<!-- hide
function changeColour(colour) {
document.getElementById('coloured').style.color = colour;
}
// and stop. -->
</script>
</head>
<body>
Normal and boring text.<p>
<span id=coloured>colours colours colours</span><p>
<a href="javascript:changeColour('red')">red!</a><br>
<a href="javascript:changeColour('green')">green!</a><br>
<a href="javascript:changeColour('blue')">blue!</a><br>
<a href="javascript:changeColour('#63fb8c')">63FB8C!</a><br>
</body></html>
agent002
04-09-2004, 04:47 PM
it probably didn't work because you used the javascript: prefix in the onClick action. You should use it in hrefs only. :)
wiffles
04-10-2004, 07:37 AM
Okay, the basic idea works fine, but can I use this method to change the style options of the page background?
agent002
04-10-2004, 07:47 AM
sure, just alter document.body.style.backgroundColor.
wiffles
04-10-2004, 10:06 AM
Erm... hang on, I didn't explain it properly. What I want to do is use this to scroll the background by altering the background's background-position.

Here's some of what I've got so far:
<script language="JavaScript">
<!-- hide
bgY = 0

function psychoBG() {
bgY += 1
if (bgY == 539) {
// 539 is the image height - hardcoded
bgY = 0
}
document.backgroundImage.style = "background-position: 0px "+bgY+"px";
setTimeout("psychoBG()",1000/60);
}
// -->
</script>
<style type="text/css">
<!--
backgroundImage {background-position: 0px 0px}
-->
</style>
wiffles
04-11-2004, 09:31 AM
Well, I've figured out the problem. I need to use getElementById() with an ID that I gave the <body> tag. Problem is, I then need to change background-position which I can't do in JS because it reads the - as a minus and all the JS in my page just grinds to a halt! How can I get round this?
agent002
04-11-2004, 11:41 AM
instead of
document.backgroundImage.style = "background-position: *****";
use
document.backgroundImage.style.backgroundPosition = "*****";
:)
wiffles
04-11-2004, 12:14 PM
It works! And it looks brilliant... :D