Take the 2-minute tour ×

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:

    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. */        
    height: 163px;
    width: 250px;
    border: 1px solid #ccc; 
    border-top: 1px solid #ddd;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    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 */

     background-image: url('/TLSADMIN/UserControls/contactsgrid/OutlookContactGradient.png') ;
      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.


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

alt text

share|improve this question
One approach would be to change the CSS class itself, but that is said to be cumbersome. See stackoverflow.com/questions/1409225/… –  Pekka 웃 Aug 12 '10 at 15:47
"I need to modify all the objects on the page with a style." please elaborate; do you mean "I need to modify all the objects on the page, adding/removing/changing a style" or "I need to modify all the objects on the page which have a particular style attribute."? –  Richard JP Le Guen Aug 12 '10 at 15:48
Do you by "all objects" really mean every element on the page? –  Pekka 웃 Aug 12 '10 at 15:48
@All - I just included more detail as requested –  makerofthings7 Aug 12 '10 at 16:01
I'm deleting my answer below because I think 99% of this question is a misunderstanding of how CSS works or which particular properties and rules would achieve the effect you desire. The question you originally asked is different than what you have now. –  Jesse Dhillon Aug 12 '10 at 16:11

3 Answers 3

up vote 2 down vote accepted

So let's say you have some HTML like this...

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

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.

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

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


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('*');
            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.

share|improve this answer
Thank you for the IE and non-IE examples. It's very clear and I learned quite a bit, thanks to you! –  makerofthings7 Aug 12 '10 at 19:18

If you google getelementbyclassname that might help you. Similar idea to getelementbyid but gets them by classname you can them modify their styles as you see fit.

share|improve this answer
Not supported in IE –  Richard JP Le Guen Aug 12 '10 at 15:52
this link might help you developer.mozilla.org/en/DOM/document.getElementsByClassName –  khairil Aug 12 '10 at 15:54
It's not supported by IE, but you can check to see if the function exists, and if not use a custom one that just goes through all the elements and gets only ones with the class specified. Although it would be easier to just use a JS framework. –  tj111 Aug 12 '10 at 16:03
There is a function someone else has written that is supported by ie:ejohn.org/blog/getelementsbyclassname-speed-comparison –  matpol Aug 13 '10 at 7:35

My recommendation would be to create the class that you need in your CSS file and change it with jQuery.


And in jQuery :


This way, you do not need to do anything "weird" and complicated to get the result that you need.

share|improve this answer
Since I'm doing this to adjust the size of the elements... this is a possible approach... but it doesn't allow me to alter the class with a fractional number for say the width, height, or font size of the data I'm displaying –  makerofthings7 Aug 12 '10 at 16:27

Your Answer


