Поиск самого крупного шрифта на странице
Доброе времени суток всем посетителям форума :)
Собственно, вот с какой задачей я столкнулся: нужно написать программу на языке JavaScript выполняющую следующее преобразование HTML-документа: найти на странице текст написанный самым крупным шрифтом и сделать его размером 14 px. Так вот, как человек мало знакомый с JS, покопался я немного в Интернете, почитал учебник на этом сайте и нашел некий пример, где сначала создаются классы в CSS, а затем мы сами динамически управляем стилями. Насколько я понял, моя задача имеет что-то похожее с этим делом...Вот что я придумал и немного изменил из имеющегося примера:
<style type="text/css">
.class1{
font-size: 48px;
font-weight: bolder;
}
.class2{
font-size: 14px;
font-weight: normal;
}
</style>
<script type="text/javascript" language="javascript">
function doBlinkClass()
{
var elm = document.getElementById("styler_class");
if(elm)
{
if(elm.className == "class1")
elm.className = "class2";
else
elm.className = "class1";
}
}
window.setInterval("doBlinkClass();", 1000);
</script>
/* В элемент body добавим соответствующий тег с текстом: */
<span class="class1" id="styler_class">Тестовая строка</span>
НО! Здесь мы стили и размер шрифта задали сразу. А скрипт по идее должен сам находить его на странице (текст с самым крупным размером шрифта) и менять на 14px. При чем задачу осложняет то, что это может быть текст, заключенный в какой-угодно тег (то ли это будет заголовок <h1>, то ли параметры шрифта пропишутся в <font>, то ли вообще зададутся в каком-то левом классе и загонятся в <div>). Вот, собственно, и вся моя проблема. Очень хотелось бы услышать от Вас доступный новичку ответ и решение этой задачи как можно легче и проще. ОГРОМНЕЙШЕЕ Вам СПАСИБО за ранее! :thanks: |
В простом частном случае Вам необходимо "пробежаться" по всем элементам дерева DOM страницы и проверить свойство xxx.style.fontSize, затем из просмотренных выбрать наибольшее значение. Однако, размеры шрифтов, описанные в классах секции <style></style> так не вычислите. Также у элементов может быть не указано конкретное значение размера шрифта, а включено наследование размеров шрифтов от их родителей, причем в длинной цепочке вложенности один в другой (inherit). В этих случаях надо использовать "Computed Style" - вычисленному стилю элемента, доступ к которому делается по-разному, в зависимости от браузера. Можете почитать здесь: http://javascript.ru/ui/show-hide-toggle
|
можно так, ищет один элемент с самым крупным шрифтом - если надо чтобы находило несколько, то доработайте
для быстроты на jquery
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>test</title>
<style>
h3 b { font-size: 5em;} /* самый крупный */
</style>
<script>
$(function () {
$(document.body).click(function () {
var maxSize = 0;
var maxEl;
$('body *').each(function () { // перебираем все элементы на странице
var curSize = parseFloat($(this).css('font-size'));
if (curSize > maxSize) {
maxSize = curSize;
maxEl = this;
}
});
$(maxEl).css('font-size', '14px');
});
});
</script>
</head>
<body>
<p>кликните для начала</p>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3><b>Hello</b> World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
|
Pavel M., СПАСИБО БОЛЬШОЕ! вроде бы мне более-менее Ваш вариант ясен, хотя и задание нужно делать без использования jquery. А что если например у нас есть на странице предложение, или, скажем, куски текста размером в 5em? Насколько я понял, ваш скрипт перебирает слова и сравнивает переменную curSize с размером данного шрифта. Может тогда нужно завести массив, где будут храниться либо одно значение самого крупного шрфита, где оно встречается либо несколько одинаковых (если на странице есть в разных местах куски крупного текста).
|
Да, тогда лучше maxEl сделать массивом элементов
в примере теперь 2 элемента с крупным шрифтом
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>test</title>
<style>
h3 b { font-size: 5em;} /* самый крупный */
</style>
<script>
$(function () {
$(document.body).click(function () {
var maxSize = 0;
var maxEl = []; // будет массив элементов
$('body *').each(function () { // перебираем все элементы на странице
var curSize = parseFloat($(this).css('font-size'));
if (curSize > maxSize) {
maxSize = curSize;
maxEl = [this];
} else if (curSize === maxSize) {
maxEl.push(this);
}
});
$(maxEl).css('font-size', '14px');
});
});
</script>
</head>
<body>
<p>кликните для начала</p>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3><b>Hello</b> Worl<b>d</b></h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
|
Pavel M., СПАСИБО огромное! так намного лучше и смотрится, и главное - работает! премного Вам благодарен :)
|
Народ, подскажите, пожалуйста!!! А возможно ли находить крупнейший размер шрифта на странице не обращаясь к атрибуту font-size, т.е. вообще исключая обращение к CSS??? Мне сказали (хотя, погуглив, я не нашел данной информации), что иногда при верстке страниц с помощью HTML/JavaScript/jQuery применяются некие функии(функция), автоматически определяющие размер текстового блока в нужном фрагменте страницы. Так вот, ЭТИ САМЫЕ БЛОКИ очень непредсказуемы, т.к. самый крупный текст может быть именно там, а мы и подозревать об этом не будем, т.к. все будет происходить за нашей спиной...
Вообщем, изложил я как мог, хотя, наверное, не совсем понятно...Но хотелось бы услышать Ваше мнение по этому поводу и конкретный пример на практике, если можно... СПАСИБО!!! :) |
стили css
теги атрибуты тегов -других способов задать размер нет ,ну и само собой наследование,каскад влияют. Цитата:
|
dmitriymar, к счастью это придумал не я :) мне просто усложнили задачу, попросив погуглить насчет поиска крупного шрифта вообще без обращения к CSS...
я и сам немного в растерянности! ну вообщем Ваш вердикт - "такого не бывает", верно? честно говоря, я и сам за font-size и не понимаю зачем было усложнять задачу)) |
Цитата:
помимо css бывает: теги-<strong> ,<b>,<h..><font>..... ,вложения тегов.Атрибуты тегов -size |
| Часовой пояс GMT +3, время: 09:20. |