How to change the font-size uniformly?


Tags: javascript,jquery,html,css

Problem :

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?



Solution :

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;
}


    CSS Howto..

    How to style a

    inside a div with css [closed]

    how to write this code as link click animation

    Selecting an adjacent's child… how?

    How to rotate an image with CSS style transform by an variable of degree?

    How can I place multiple spans in the same line?

    How to edit the CSS of CarrierWave's 'Choose file' button and “No file chosen” text? (Rails4)

    How to make my text appearing while scrolling website

    How to show scrollbar when the inner content is aligned to bottom?

    How to apply an opacity without affecting a child element with html/css?

    How to vertically align text to the right of some text using css? [closed]

    How can I make it so the first element in a DIV has a different CSS to others?

    How do I remove column padding to have full-width inputs in Bootstrap 3?

    How to make the content of a span wrap onto the next line in an embedded

    how to add a permanent line on top of ios7 in phonegap

    How to hide grey scrollbars on a DIV in Android - they only show when you cannot scroll

    How to create custom horizontal radio buttons with CSS?

    CSS: How to get browser scrollbar width? (for :hover {overflow: auto} nice margins)

    How to select that has no “type” with CSS

    How to turn off carousel when resized?

    How to combine the two same css selector into one?

    How to abstract this single case (showing text field based on selection of a drop down list) into a general function in jQuery?

    How do I display menu items in front of images?

    how to dynamically remove css in Angular?

    CSS and HTML: How to create an Expanding DIV On Click?

    How can I have a transparent overlay and center with flex box?

    How do I set a cursor css for text inside li element?

    How does JS DOM manipulation affect CSS rule matching?

    How to make an arrow in html5 or css

    How to display a centered background of fixed width

    How is the force reload of javascript/css done in Symfony?