0

How to target element with inline-style font-size defined in pixels (ex: font-size:12px) in order to modify font-size on a button click.

Can someone help finish this javascript code :

html

<div class='parent' style='font-size:15px'>
    <div>div 1 no inline styling</div>
    <div style='font-size:1em'>div 2 inlined font-size 1em</div>
    <div class='div-3'>div 3, CSS font-size:14px;</div>
    <div style='font-size:22px'>div 4 inlined font-size 22px</div>
    <div style='font-size:16pt'>div 5 inlined font-size 16pt</div>
    <div style='font-size:80%'>div 6 inlined font-size 80%</div>
</div>
<div id="output_box"></div>

javascript

$('*').filter(function() {
     /*var a-match-in-px-units = some-regular-expression-someelse-can-help-about;*/
     return $(this).css('font-size') == '11';
    $('#output_box').html($(this));
});

$("#trigger").click(function() {
    alert('to initialize font-size in px to bigger/lesser unit function()');    
   /* This is to apply font-resizing */     
});

I prepared a jsFiddle

I found this other answer useful Find elements which have greater font-size than specified

Community
  • 1
  • 1
Milche Patern
  • 19,632
  • 6
  • 35
  • 52

2 Answers2

2

JQuery .css('font-size') always returns pixels, even if the original size was defined with a different unit. I would use .attr('style') instead (works with inline styles only) :

var result = $('*').filter(function () {
    var style = $(this).attr('style');
    return /font-size:[^;]+px/.test(style);
});

Here is a demo : http://jsfiddle.net/wared/8LcD9/.

  • This looks like it. I'll give it a try 2morrow (it's passed 4h30am). wared, maybe you could help with this other question too : http://stackoverflow.com/questions/20592165/increase-font-size-of-whole-web-page-on-button-click-event-using-jquery I no need to take credit for your inspiration but this other question might be looking for your help too. – Milche Patern Dec 15 '13 at 09:35
  • Poked again .. and yes i was tired. – Milche Patern Dec 16 '13 at 15:19
  • @MilchePatern I've tried something there : http://stackoverflow.com/a/20618812/1636522. Currently, I need to know if OP has control over *non* inline styles in order to try a "lightweight" solution. –  Dec 16 '13 at 19:13
  • Greetings and happy new present moment wared. I was about to delete this question for avoiding duplication. Anyway, back to the point, your jsfiddle is not resulting in what i want and other answer is partial to suit my needs. I modified my question to make it clearer. – Milche Patern Jan 04 '14 at 23:25
  • @Milkywayspatterns I'm sorry, I guess I was tired too ^^' –  Jan 05 '14 at 00:10
  • After realizing the reformed question didn't suit the answer given, i rolled back and moved the improved question here : http://stackoverflow.com/questions/20937296/match-elements-with-inline-style-font-size-for-every-absolute-lengths-units – Milche Patern Jan 05 '14 at 18:19
2

You may try indexOf on style attribute:

$('.parent').each(function (index, value) {
    if (/font-size:[^;]+px/.test($(this).attr('style'))) {
        alert(index + ": " + $(this).attr('style'));
    }
});

Here is Demo Fiddle

Zaheer Ahmed
  • 28,160
  • 11
  • 74
  • 110