Power User of Powerhouse CSS Style Changer

The Powerhouse CSS Style Changer function changes the CSS style of individual HTML elements on the current web page to the styles you specify.

The JavaScript PowerhouseStyleChange() does an excellent job, elegantly. Whatever CSS an HTML tag (such as div and p) can have can be added or changed with a call to that function.

But it can change only one HTML element at a time.

This article has a StyleChangeForPowerhouse() function that accepts CSS changes for numerous HTML elements.

StyleChangeForPowerhouse() works by calling PowerhouseStyleChange() for each HTML element with CSS to change.

An Illustration

Here is an illustration. Click this link to change the border, padding, and font family of the first div and, of the second div, switch text and background colors. Then click this link to reverse the changes.

The code to reproduce the illustration on your test page is further below. But first, the JavaScript functions.

The JavaScript Functions

There are two JavaScript functions, StyleChangeForPowerhouse() and PowerhouseStyleChange().

The first function, StyleChangeForPowerhouse(), is new in this article. It needs no customization.

That second function, PowerhouseStyleChange(), is copied straight out of the Powerhouse CSS Style Changer article. It also needs no customization.

Here is the JavaScript with both functions. It can be placed anywhere in your web page source code that JavaScript can run. Near the bottom of the page, above the cancel </body> tag is generally a good spot.

<script type="text/javascript">

function StyleChangeForPowerhouse()
{
   for( var i=0; i< arguments.length; i++ ) 
   {
        var ta = arguments[i].split("=",2);
        PowerhouseStyleChange(ta[0],ta[1]);
   }
}

function PowerhouseStyleChange(idvalue,style)
{
   // Version 1.0, March 14, 2017.
   // Version 1.1, November 10, 2017 (removed .replace(...) from last code line)
   // Will Bontrager Software LLC - https://www.willmaster.com/
   var id = document.getElementById(idvalue);
   var ta = style.split(/\s*;\s*/);
   for( var i=0; i<ta.length; i++ )
   {
      var tta = ta[i].split(':',2);
      var ttaa = tta[0].split('-');
      if( ttaa.length > 1 )
      {
         for( var ii=1; ii<ttaa.length; ii++ )
         {
             ttaa[ii] = ttaa[ii].charAt(0).toUpperCase() + ttaa[ii].slice(1);
         }
      }
      tta[0] = ttaa.join('');
      id.style[tta[0]] = tta[1];
   }
}

</script>

Using the JavaScript

A link or other triggers (such as onmouseover) can call the StyleChangeForPowerhouse() function.

The StyleChangeForPowerhouse() function can accept new CSS declarations for any number of HTML elements.

The style for an HTML element is specified like this:

ID=style

Replace ID with the id value of the HTML element. And replace style with the CSS style to update the HTML element with.

Example:

element-one=border:9px solid #ccc; font-family:courier;

When specifying a style, use the format you would use if you were typing inline CSS declarations.

To call the StyleChangeForPowerhouse() function, specify ID=style between quotes. For multiple elements, separate each quoted ID=style set with a comma.

Here is an example with ID=style for two HTML elements.

StyleChangeForPowerhouse("ID=style","ID=style")

And here is an example with actual CSS for two HTML elements.

StyleChangeForPowerhouse("element-one=border:9px solid #ccc; font-family:courier;","element-two=color:gold; background-color:purple;")

Reproducing the Illustration

To reproduce the illustration, put the following code on a web page along with the JavaScript functions StyleChangeForPowerhouse() and PowerhouseStyleChange() from the code box further above. Notes follow.

<div id="element-one" 
    style="float:left; 
           width:200px; 
           height:50px; 
           font-family:sans-serif;
           font-size:14pt;
           border:1px solid #000;
           padding-top:13px;
           margin-right:3px;
           text-align:center;
           box-sizing:border-box;">
Testing
</div>
<div id="element-two" 
    style="float:left; 
           width:200px; 
           height:50px; 
           color:#666666;
           background-color:#cccc99;
           font-size:14pt;
           font-weight:bold;
           border:1px solid #ccc;
           padding:13px;
           text-align:center;
           box-sizing:border-box;">
Testing
</div>
<div style="clear:left;"></div>


<p>
<a href="javascript:ChangeThem()">Click this link</a> to change the border and font family of the first div and switch text and background colors of the second div. 
Then <a href="javascript:ReverseChanges()">click this link</a> to reverse the changes.
</p>


<script>
function ChangeThem()
{
    StyleChangeForPowerhouse("element-one=border:9px solid #ccc; padding-top:5px; font-family:courier;","element-two=color:#cccc99; background-color:#666666;");
}

function ReverseChanges()
{
    StyleChangeForPowerhouse("element-one=border:1px solid #000; padding-top:14px; font-family:sans-serif;","element-two=color:#666666; background-color:#cccc99;");
}
</script>

Notes:

The id value for each div is colored blue to make it easier to correspond with the JavaScript below the div HTML.

The CSS declarations that the JavaScript changes are colored red in the div HTML. (The JavaScript could be used to introduce new CSS declarations. It's not restricted to only changing what's present.)

Below the div HTML, you'll see example links. And below that, the JavaScript to make the changes. In the JavaScript, the calls to StyleChangeForPowerhouse() have their parameters color coded like previous examples.

You now have a power user technique for Powerhouse CSS Style Changer. Change the styles of two or many HTML elements with one JavaScript function call.

(This article first appeared in Possibilities newsletter.)

Will Bontrager