Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2012, 19:36
Интересующийся
Отправить личное сообщение для eXTrEMe888 Посмотреть профиль Найти все сообщения от eXTrEMe888
 
Регистрация: 17.04.2012
Сообщений: 14

Поиск самого крупного шрифта на странице
Доброе времени суток всем посетителям форума
Собственно, вот с какой задачей я столкнулся: нужно написать программу на языке 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>). Вот, собственно, и вся моя проблема. Очень хотелось бы услышать от Вас доступный новичку ответ и решение этой задачи как можно легче и проще. ОГРОМНЕЙШЕЕ Вам СПАСИБО за ранее!
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2012, 12:44
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

В простом частном случае Вам необходимо "пробежаться" по всем элементам дерева DOM страницы и проверить свойство xxx.style.fontSize, затем из просмотренных выбрать наибольшее значение. Однако, размеры шрифтов, описанные в классах секции <style></style> так не вычислите. Также у элементов может быть не указано конкретное значение размера шрифта, а включено наследование размеров шрифтов от их родителей, причем в длинной цепочке вложенности один в другой (inherit). В этих случаях надо использовать "Computed Style" - вычисленному стилю элемента, доступ к которому делается по-разному, в зависимости от браузера. Можете почитать здесь: http://javascript.ru/ui/show-hide-toggle
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2012, 10:34
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

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

для быстроты на 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., 19.04.2012 в 10:36.
Ответить с цитированием
  #4 (permalink)  
Старый 19.04.2012, 15:48
Интересующийся
Отправить личное сообщение для eXTrEMe888 Посмотреть профиль Найти все сообщения от eXTrEMe888
 
Регистрация: 17.04.2012
Сообщений: 14

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

Да, тогда лучше 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>
Ответить с цитированием
  #6 (permalink)  
Старый 24.04.2012, 12:27
Интересующийся
Отправить личное сообщение для eXTrEMe888 Посмотреть профиль Найти все сообщения от eXTrEMe888
 
Регистрация: 17.04.2012
Сообщений: 14

Pavel M., СПАСИБО огромное! так намного лучше и смотрится, и главное - работает! премного Вам благодарен
Ответить с цитированием
  #7 (permalink)  
Старый 03.05.2012, 18:30
Интересующийся
Отправить личное сообщение для eXTrEMe888 Посмотреть профиль Найти все сообщения от eXTrEMe888
 
Регистрация: 17.04.2012
Сообщений: 14

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

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

Последний раз редактировалось dmitriymar, 03.05.2012 в 18:48.
Ответить с цитированием
  #9 (permalink)  
Старый 03.05.2012, 18:49
Интересующийся
Отправить личное сообщение для eXTrEMe888 Посмотреть профиль Найти все сообщения от eXTrEMe888
 
Регистрация: 17.04.2012
Сообщений: 14

dmitriymar, к счастью это придумал не я мне просто усложнили задачу, попросив погуглить насчет поиска крупного шрифта вообще без обращения к CSS...
я и сам немного в растерянности! ну вообщем Ваш вердикт - "такого не бывает", верно?
честно говоря, я и сам за font-size и не понимаю зачем было усложнять задачу))
Ответить с цитированием
  #10 (permalink)  
Старый 03.05.2012, 18:52
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

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

Последний раз редактировалось dmitriymar, 03.05.2012 в 18:55.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск текста на странице Azazaza jQuery 6 15.02.2013 22:47
Поиск текста на странице setRange quazare Firefox/Mozilla 0 07.04.2011 21:09
Поиск на странице maza51 Общие вопросы Javascript 1 20.03.2011 11:26
Поиск id на странице Suharik jQuery 2 27.10.2010 16:18
Поиск на странице no_name jQuery 4 07.09.2010 12:26