• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 218
  • Last Modified:

Controlling elements of class by use of form in HTML

I need to be able to allow user to control the look of a page for reasons of accessibility.  I have a form and input buttons in html but whilst

onclick="document.body.style.fontweight='bold" (and similar)

works for the whole page I only want to give the user the opportunity to change text in one div with a  CSS class name of ".caps".  I have tried many things without success.

(I can't use external stylesheets because of clashes with other elements in xhtml+smil.  The solution should err on the side of simplicity as its needs to be fed back into xsl sheet))

thanks in anticipation

1 Solution
if the .caps classed div would have an id="someid" then you could always use onclick="document.getElementById('someid').style.fontweight='bold';" wouldn't you?

I'm not clear on what you are trying to do.  If you are just trying to change one div the using an id as Roonaan posted is all you need.

If you are trying to modify the properties of the class, that is also possible with scripting. If you are trying to add the property... also possible; as is modifying an existing property.  If you need the scripting to manipulate the styles just give a little more detail of what you actually need changed, and I will post some script.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
                        <input type="button" value="bold" onclick="this.parentNode.parentNode.style.fontWeight = 'bold'">
                        <input type="button" value="caps" onclick="this.parentNode.parentNode.style.textTransform = 'uppercase'">
                        This is text inside the div which has a toolbar for altering it's appearance.
7 new features that'll make your work life better

It’s our mission to create a product that solves the huge challenges you face at work every day. In case you missed it, here are 7 delightful things we've added recently to monday to make it even more awesome.

ToulmindriveAuthor Commented:
Thanks everyone.  If it is not considered too cheeky, it would easier to show by example that to explain and I have put a sample presentation at:

to summarise; there is text in a class (.caps) that is contained in a wider div and I want the user to have some control on the look of the text in this part of the page but the pages change dynamically and any changes should persist.

This is the scripting that will do it.  You can fire it off of any event. However, I can't guarantee it because you are using IE only styling in the form of expressions that are known to reduce DOM integrity, so you may find that the methods intended to manage the CSS are not reliable because of the M$ specific code designed to prvent other browser from working correctly.  I hope this is for an internal intranet app, because you definitely do not want to put it on the Internet unless you are not interested in non-IE user.  The page is adisaster in anything but IE.

<script type="text/javascript">
   function set2bold()
      if (!document.styleSheets) return;
      var mycss = new Array();
      if (document.styleSheets[0].cssRules)  // Mozilla
         mycss = document.styleSheets[0].cssRules;
           mycss = document.styleSheets[0].rules;  // IE
        for (i=0;i<mycss.length;i++)

ToulmindriveAuthor Commented:
Thanks, I have gone for the easier solution of defining classes that are based on 'caps' such as 'capsBlack' and then calling them in a form.  

<form action="[URL]" accesskey="z">
  <div align="right" ><strong><font face="Verdana, Arial, Helvetica, sans-serif" size="-1">Set Background(z):</strong>
  <select size="1"  onChange="document.getElementById('captions').className=value;">

<option selected value="caps">White</option>
<option value="capsBlack">
Black\contrast text</option>

<option value="capsBlue">Blue</option>


this is not elegant but works to meet current needs.   Only problem now: I can't remember how to reset the list to 'White' after a refresh.  Ideas?

All the answers were helpful but I will give the points to Roonaan.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now