logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g JavaScript / Java Site

BellaOnline's JavaScript / Java Editor

g

Changing Page Styles on the Fly with JavaScript

Guest Author - Julie L Baumler

JavaScript is commonly used to make small changes in a web page in response to some action by the reader. I recently came across a situation where I wanted to completely change the document's style depending on certain factors. As is my habit, I decided to write a small program to play with this. For the sake of experimentation, I decided to work with just a few very simple and visible style changes. If this were my final goal, it would probably be easiest to just make the changes directly for instance, setting the background color by setting document.body.style.background to my desired choice. However, I wanted to use CSS, because I find that simpler for large scale changes (and also, because it's easier to just cut and paste CSS when you see some you like!)

DESIGN:
I use in-line style sheets with the <style> tag fairly often, so that's what I used for my experiment. To support this I put an empty set of style tags in my page header. Since this is an experiment and I want reusable code for bigger projects, I decided to use a function to make the changes. My function, change_style, takes the desired style in CSS syntax as an argument which it sets as the content between the opening and closing style tags by assigning it to document.getElementsByTagName('style')[0].innerHTML.

For experimental purposes, I decided to use buttons to trigger the changes. I created four buttons which call my function with different arguments, including one that sets the style back to empty.

CODE:
My final code looked like this:


<html>
<head>
<title>Changing style</title>
<style type="text/css">
</style>
<script type="text/javascript">
function change_style(new_style){
document.getElementsByTagName('style')[0].innerHTML=new_style;
}
</script>
</head>
<body>
<p>Press Button to Change Style</p>
<form>
<input type="button" value="Font Color" onclick="change_style('body{color: teal;}')">
<input type="button" value="Font Size" onclick="change_style('body{font-size:30;}')">
<input type="button" value="Background" onclick="change_style('body{background: pink;}')">
<input type="button" value="Default" onclick="change_style('')">
</form>

</body>
</html>


DISCUSSION:
This works well, but it quickly gets unwieldy as you have more style information. I think using external style sheets would be a better solution in this case. Using the style tag seems more useful for adding or changing one or two items in the style sheet. Taking advantage of the cascading feature of CSS , this can be done by simply changing the function to use the concatenation operator (.=) to append new information to the contents between the style tags.
This results in the following function:

function change_style(new_style){
document.getElementsByTagName('style')[0].innerHTML.=new_style;
}

In both cases, we are assuming we have one and only one set of style tags in the document. That seems like a reasonable assumption, but what if you had different style sheets for printing versus screen use? How do you know you are changing the correct one?

REFERENCE:
Style Sheets in HTML documents - from the W3C
This site needs an editor - click to learn more!

Add Changing+Page+Styles+on+the+Fly+with+JavaScript to Twitter Add Changing+Page+Styles+on+the+Fly+with+JavaScript to Facebook Add Changing+Page+Styles+on+the+Fly+with+JavaScript to MySpace Add Changing+Page+Styles+on+the+Fly+with+JavaScript to Del.icio.us Digg Changing+Page+Styles+on+the+Fly+with+JavaScript Add Changing+Page+Styles+on+the+Fly+with+JavaScript to Yahoo My Web Add Changing+Page+Styles+on+the+Fly+with+JavaScript to Google Bookmarks Add Changing+Page+Styles+on+the+Fly+with+JavaScript to Stumbleupon Add Changing+Page+Styles+on+the+Fly+with+JavaScript to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the JavaScript / Java Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Julie L Baumler. All rights reserved.
This content was written by Julie L Baumler. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
Hearing Dog Tool - Adding Randomness

Hearing Dog Training Tool setTimeout()

GCJ - an Independant Java Implementation

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor