Question

All the examples I’ve seen use “getElementById” to get the single element, and then change that style for that singular element.

I’m in the situation where I need to modify all the matching elements on the page with a style. I need to change the font size, height, and width. How do I do this, and is jQuery required or optional? The reason I ask is because this site doesn’t use jQuery and I’d rather not download the entire library just to accomplish this one thing.

Update
As an example, suppose I have several elements on the page with this style:

.outerContact
{
    border: 0px;
    margin: 7px;    
    float: left;
   padding: 0px; 
 background: url(/TLSADMIN/UserControls/contactsgrid/trans-shadow.png) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */        
}
.contactLarge{
    height: 163px;
    width: 250px;
    border: 1px solid #ccc; 
    border-top: 1px solid #ddd;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size:small;
    margin: -5px 5px 5px -5px; /* Offset the image by certain pixels to reveal the shadow, as the shadows are 6 pixels wide, offset it by that amount to get a perfect shadow */

  /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */     
     background-image: url('/TLSADMIN/UserControls/contactsgrid/OutlookContactGradient.png') ;
     background-repeat:repeat-x;
      background-position: bottom;
padding: 0px; /* Increasing this gives a white border around the image */ 
background-color: #f2f6f9; /* Background color of the border created by the padding */
border: 1px solid #cecece; /* A 1 pixel greyish border is applied to the white border created by the padding */ 
display: block; /* IE won't do well without this */ 
position: relative; /* Make the shadow's position relative to its image */ 

}

And then assume I have a JavaScript function that will proportionally resize the elements above according to a slider bar. The slider bar I’m using is available from a 3rd party here:
http://aspnetajax.componentart.com/control-specific/slider/features/custom_Scrollbar/WebForm1.aspx

That slider will then pass a number that I’ll use to determine how much to zoom in/out:

function ResizeWindowAccordingToScrollBar(PercentChange)
{
 //Locate elements
 //Resize fonts, borders, all styles to zoom in/ zoom out.

}

How do you recommend I handle the “PercentChange” value? I may swap out the CSS style for each matching element using a switch statment, but that may not be as smooth as other options could be.

UPDATE2

Also, if someone wants to look at my code, a self contained sample is here:
http://www.perfmon.com/download/StackOverflow_ContactsGrid.zip

If you download the ComponentArt Controls, feel free to uncomment the scrollbar code.

My goal is to directly emulate the zoom feature available in Outlook 2007

Answer 1

So let’s say you have some HTML like this…

<div>
    <h2>Example</h2>
    <p>This is an example</p>
    <p>
        Some of this content can be re-sized.
    </p>
    <img src="lenna.jpg" class="iconic" alt="a petty lady" />
</div>

You need some of these elements to be zoomable/re-sizable. First, you need to identify those elements using element identifiers; either the id attribute or the class attribute.

The difference between the two is an id attribute has to be unique; since we need several items to be identified as zoomable, we’ll use a class attribute instead. We’ll use an appropriate, self-evident value, like zoomable.

<div>
    <h2>Example</h2>
    <p>This is an example</p>
<div>
    <h2>Example</h2>
    <p>This is an example</p>
    <p class="zoomable">
        Some of this content can be re-sized.
    </p>
    <img src="lenna.jpg" class="zoomable iconic" alt="a petty lady" />
</div>
</div>

Note that the <img> element already had a class attribute, but we can assign that element to multiple classes, according the to w3c recommendation:

This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

So we’ve figured out the markup. Now for the JavaScript.

Once we’ve done that, you can use the document.getElementsByClassName(...) function to get references to all those zoomable elements:

var zoomables = document.getElementByClassName('zoomable');
for(var i=0; i<zoomables.length; i++) {
    zoomables[i].style.height = '100px';
    zoomables[i].style.width = '100px';
    zoomables[i].style.fontSize = '20px';
}

… but it’s not supported in Internet Explorer, so you’ll have to use Object Detection to determine if you need to define it instead:

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) { // this is the simplest, plainest, lowest-invested-time-and-effort
                                                            // version of getElementsByClassName  one can write...
        // you should probably sanitize that className input parameter a bit...
        var allElements = document.getElementsByTagName('*');
        for(var i=0; i<allElements.length; i++) {
            if(/\bclassName\b/.test(allElements[i].className)) {
                allElements[i].style.border = "2px solid red";
            }
        }
    }
}

This doesn’t completely solve your problem, but it should set you on the right path.