Question

If I have the following HTML:

<div class="div1">
   <div class="div2">
   </div>
   <div class="div3">
   </div>
</div>

div2 and div3 have their own CSS with font-sizes etc. defined. Is there a way I can reduce the font-size of div1 uniformly? That is, take the font size defined in div2 and div3 and reduce them by say 2px? This is similar to how you do Select All -> Ctrl + Shift + < to reduce the size of the selected text by 1 point in word processing software. Any suggestions?

Answer 1

I think that this is what you want:

Demo: http://jsfiddle.net/SO_AMK/JjutY/

HTML:

<div class="div1">
   <div class="div2">
       Some text, and more, and more, and more, and more, and more, and more, and more, and more.
   </div>
   <div class="div3">
       Some text, and more, and more, and more, and more, and more, and more, and more, and more.
   </div>
    <button class="increaseFontSize">Increase Font Size</button>
</div>​

jQuery:

$(".increaseFontSize").click(function(){
        var fontSize = getFontSize($(".div3"));
        var newFontSize = fontSize + 2;
        $(".div3").css("font-size", newFontSize);
        return false;
});
function getFontSize(element) {
    var currentSize = $(element).css("font-size");
    var currentSizeNumber = parseFloat(currentSize);
    return currentSizeNumber;
}

​