Relative Restyle

by skibulk

HTML

<div id="wrapper">
    <p style="font-size: 28px;">Donec felis est, ornare eu felis ac, suscipit suscipit risus.</p>
    Sample Text Node.
    <p>Nulla ullamcorper placerat tellus, ac mollis erat lobortis id. Sed iaculis dolor in efficitur auctor. <strong>Duis risus lacus</strong>, gravida non luctus tempus, varius et libero. <em>Vestibulum eget mattis ligula</em>, at venenatis orci. Praesent odio ex, pharetra suscipit feugiat fringilla, varius at dolor. Quisque gravida nisl et purus bibendum molestie. Nulla sagittis tempus erat, et pulvinar eros efficitur ut. </p>
    <div style="font-size: 12px;">
      <p>Sed auctor posuere nisl nec sollicitudin:</p>
      <ul>
        <li>Nunc non metus quis.</li>
        <li> Erat pretium cursus.</li>
        <li>Cras laoreet <strong>bibendum massa</strong> eu lobortis.</li>
        <li>Vivamus id venenatis justo.</li>
        </ul>
    </div>
</div>

CSS

span
{
    font-size: 80%;
    line-height: 80%
}

JavaScript

/*
var textNodes = $('#wrapper, #wrapper *').contents().filter(function(){
   return this.nodeType == Node.TEXT_NODE;
});
console.log(textNodes);

$.each(textNodes, function(key, val){
   $(val).wrap('<span></span>') 
});
*/

function relativeRestyle (selector, updatesArray) {
    var $wrapperElements = $(selector);
    
    // loop the array elements in reverse to bypass calling $.each() and $.css() twice?
    // write the children first, parents last
    // assumes the selector uses *
    $.each($wrapperElements, function(key, val){
        var fontSize = parseFloat($(val).css("font-size"));
        $(val).css('font-size', fontSize);
    });
    $.each($wrapperElements, function(key, val){
        var fontSize = parseFloat($(val).css("font-size"));
        eval('fontSize'+'*=1.1');
        $(val).css('font-size', fontSize);
    });
}

relativeRestyle('#wrapper, #wrapper *', {
    'font-size': '*= 1.1',
    'line-height': '*= 1.1'
});