Предисловие
Эта ситуация будет встречаться во время разработки. Отображаются только две линии. Если превышено более двух строк, будет отображаться кнопка «Показать больше». Нажмите кнопку, чтобы отобразить содержимое оставшихся строк. Существует loadingDots плагин jQuery, который специально реализует эту функцию. Тем не менее, сегодня мы собираемся использовать Native JavaScript для реализации этого требования. Для достижения этого требования наиболее важным является определение количества строк текста в этом контейнере. После получения количества строк измените высоту элемента и определите, отображается ли кнопка загрузки.
window.getComputedStyle ()
Чтобы использовать нативный код JavaScript, чтобы получить свойства индивидуального стиля элемента, неизбежно использовать window.getComputedStyle() . Он может вернуть стили элемента HTML, когда он фактически отображается в браузере - конечно, некоторые стили будут заблокированы браузером. Например, если вы хотите получить цвет ссылки и будьте готовы судить, посетил ли пользователь определенный адрес по цвету, это определенно невозможно.
Метод возвращает пару ключевых значений в стиле, которая является экземпляром CSSStyleDeclaration . Имена индексов каждого атрибута не имеет - и номенклатура верблюда принята. Например, lineHeight .
Количество рядов = общая высота/высота линии
Общая высота может быть получена до высоты. Высота ряда может быть получена через lineHeight , и результат округлен, чтобы получить количество рядов.
Но есть проблема, если значение line-height не установлено для элемента, его значение по умолчанию normal , что обычно составляет 1,2 в браузерах настольных компьютеров, но также связано с шрифтами. Следовательно, лучше всего установить значение line-height для элементов, которые необходимо рассчитать количество строк.
Простая реализация заключается в следующем:
функции countlines (ele) {var styles = window.getComputedStyle (ele, null); var lh = parseint (styles.lineHeight, 10); var h = parseint (styles.height, 10); var lc = math.round (h / lh); console.log ('count:', lc, 'line-height:', lh, 'height:', h); вернуть LC;}Полный пример кода
<! Doctype html> <html> <head> <title> count </title> <style type = "text/css"> p {line-hight: 1.3em; } </style> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> </head> <body> <p id = "target"> она только что сделала, чтобы ребенок выглядел прекрасно. Все белое, и у нее всегда есть свежий черничный пирог, который на пару и булочки и закрытые сливки, и она читает старика, а море, а ее маленький мальчик - ролли с капотами. Это потрясающе, и я подумал, что это прекрасно. Мой ребенок похож на игру с взрывными устройствами. Я не знаю, где она их нашла, как приклеить их в ухо нашей собаки. Она уже знает, как сушить стену, потому что тогда она вкладывает дыры в стену. <Br /> «Сегодняшние китайцы похожи на немцы, побаловаясь иллюзией« роста »и привыкают верить в лесть других. Они также воспринимают, что, пока Китай продолжает поддерживать экономический рост, не только будущие экономические агрегаты, которые будут преуспеть в том, что все, что может ожидать, что все, что может ожидать, что все, что может ожидать, что все, что может ожидать, что все, что может ожидать, что все, что может ожидать, что все, что может ожидать, что все, что может ожидать, что все, что может ожидать, что все, что может ожидать, что все, что может ожидать. карман. " Ченг Явен, профессор Школы международных отношений и связей с общественностью Шанхайского университета иностранных исследований, указал в своей новой книге «Стратегические державы великих держав», что многие люди в Китае в настоящее время оказались в ловушке иллюзии «процветания» и не понимают, что за полным экономическим производством Китай на самом деле является чрезвычайно отсталой стране. В мире нет большой страны, которая появилась в спокойной и мирной ситуации, и новый раунд омоложения цивилизации Китая также будет полон рисков, поворотов и поворотов. Предотвращение разрушения страны, распада или упадка должно стать главным приоритетом национальной стратегии Китая. Углубление «мягкого счастья» только сделает страну уязвимой. </p> <p> Количество строк: <span id = "deam"> </span> </p> Изменить размер окна и автоматически вычислять <button onclick = "countlines ()"> Рассчитайте немедленно </button> <script type = "text/javascript"> var target = document.getelementbyid ('target'); window.getComputedStyle (ele, null); var lh = parseint (styles.lineHeight, 10); var h = parseint (styles.height, 10); var lc = math.round (h / lh); console.log ('count:', lc, 'line-height:', lh, 'height:', h); return lc;} function change () {shower.innerhtml = countlines (target);} window.onresize = изменение; изменение (); </script> </body> </html> [/html]Суммировать
Выше всего об этой статье. Я надеюсь, что содержание этой статьи будет полезно для всех, кто использует JavaScript. Если у вас есть какие -либо вопросы, пожалуйста, оставьте сообщение для обсуждения.