Как настроить элемент с размером шрифта inline-стиля, определенным в пикселях (например, font-size: 12px), чтобы изменить размер шрифта нажатием кнопки.
Может кто-то помочь закончить этот код javascript:
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 */
});
Я подготовил jsFiddle
Я нашел этот ответ полезным. Найдите элементы, размер шрифта которых больше указанного.
Вы можете попробовать indexOf
в атрибуте style:
$('.parent').each(function (index, value) {
if (/font-size:[^;]+px/.test($(this).attr('style'))) {
alert(index + ": " + $(this).attr('style'));
}
});
JQuery .css('font-size')
всегда возвращает пиксели, даже если исходный размер был определен с помощью другого устройства. .attr('style')
я использовал бы .attr('style')
(работает только с встроенными стилями):
var result = $('*').filter(function () {
var style = $(this).attr('style');
return /font-size:[^;]+px/.test(style);
});
Вот демо: http://jsfiddle.net/wared/8LcD9/.