Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Поиск самого крупного шрифта на странице (https://javascript.ru/forum/events/27581-poisk-samogo-krupnogo-shrifta-na-stranice.html)

eXTrEMe888 17.04.2012 20:36

Поиск самого крупного шрифта на странице
 
Доброе времени суток всем посетителям форума :)
Собственно, вот с какой задачей я столкнулся: нужно написать программу на языке 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:

Маэстро 18.04.2012 13:44

В простом частном случае Вам необходимо "пробежаться" по всем элементам дерева DOM страницы и проверить свойство xxx.style.fontSize, затем из просмотренных выбрать наибольшее значение. Однако, размеры шрифтов, описанные в классах секции <style></style> так не вычислите. Также у элементов может быть не указано конкретное значение размера шрифта, а включено наследование размеров шрифтов от их родителей, причем в длинной цепочке вложенности один в другой (inherit). В этих случаях надо использовать "Computed Style" - вычисленному стилю элемента, доступ к которому делается по-разному, в зависимости от браузера. Можете почитать здесь: http://javascript.ru/ui/show-hide-toggle

Pavel M. 19.04.2012 11:34

можно так, ищет один элемент с самым крупным шрифтом - если надо чтобы находило несколько, то доработайте

для быстроты на 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>

eXTrEMe888 19.04.2012 16:48

Pavel M., СПАСИБО БОЛЬШОЕ! вроде бы мне более-менее Ваш вариант ясен, хотя и задание нужно делать без использования jquery. А что если например у нас есть на странице предложение, или, скажем, куски текста размером в 5em? Насколько я понял, ваш скрипт перебирает слова и сравнивает переменную curSize с размером данного шрифта. Может тогда нужно завести массив, где будут храниться либо одно значение самого крупного шрфита, где оно встречается либо несколько одинаковых (если на странице есть в разных местах куски крупного текста).

Pavel M. 20.04.2012 10:06

Да, тогда лучше 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>

eXTrEMe888 24.04.2012 13:27

Pavel M., СПАСИБО огромное! так намного лучше и смотрится, и главное - работает! премного Вам благодарен :)

eXTrEMe888 03.05.2012 19:30

Народ, подскажите, пожалуйста!!! А возможно ли находить крупнейший размер шрифта на странице не обращаясь к атрибуту font-size, т.е. вообще исключая обращение к CSS??? Мне сказали (хотя, погуглив, я не нашел данной информации), что иногда при верстке страниц с помощью HTML/JavaScript/jQuery применяются некие функии(функция), автоматически определяющие размер текстового блока в нужном фрагменте страницы. Так вот, ЭТИ САМЫЕ БЛОКИ очень непредсказуемы, т.к. самый крупный текст может быть именно там, а мы и подозревать об этом не будем, т.к. все будет происходить за нашей спиной...
Вообщем, изложил я как мог, хотя, наверное, не совсем понятно...Но хотелось бы услышать Ваше мнение по этому поводу и конкретный пример на практике, если можно...
СПАСИБО!!! :)

dmitriymar 03.05.2012 19:34

стили css
теги
атрибуты тегов
-других способов задать размер нет ,ну и само собой наследование,каскад влияют.
Цитата:

Сообщение от eXTrEMe888
Так вот, ЭТИ САМЫЕ БЛОКИ очень непредсказуемы,т.к. самый крупный текст может быть именно там, а мы и подозревать об этом не будем, т.к. все будет происходить за нашей спиной...

это как?

eXTrEMe888 03.05.2012 19:49

dmitriymar, к счастью это придумал не я :) мне просто усложнили задачу, попросив погуглить насчет поиска крупного шрифта вообще без обращения к CSS...
я и сам немного в растерянности! ну вообщем Ваш вердикт - "такого не бывает", верно?
честно говоря, я и сам за font-size и не понимаю зачем было усложнять задачу))

dmitriymar 03.05.2012 19:52

Цитата:

Сообщение от eXTrEMe888
ну вообщем Ваш вердикт - "такого не бывает", верно?

так как вы описали,если я правильно понял -не бывает, чтоб нигде это не фиксировалось.
помимо css бывает:
теги-<strong> ,<b>,<h..><font>..... ,вложения тегов.Атрибуты тегов -size


Часовой пояс GMT +3, время: 16:56.