Показать и скрыть текст или изображения с помощью CSS и JavaScript
Динамический HTML (DHTML) позволяет создавать приложения в стиле приложений на ваших сайтах, уменьшая частоту полной загрузки целых страниц. В приложениях, когда вы нажимаете на что-либо, приложение немедленно изменяется, чтобы показать это конкретное содержимое или предоставить вам ваш ответ.
Напротив, веб-страницы обычно должны быть перезагружены, или должна быть загружена вся новая страница. Это может сделать пользовательский опыт более разобщенным. Ваши клиенты должны ждать загрузки первой страницы, а затем снова ждать загрузки второй страницы и так далее.
С помощью
улучшить опыт просмотра
Используя DHTML, один из самых простых способов улучшить это – включить или выключить элементы div для отображения контента при его запросе. Элемент div определяет логическое разделение на вашей веб-странице. Думайте о div как о блоке, который может содержать абзацы, заголовки, ссылки, изображения и даже другие div.
Что вам нужно
Для того чтобы создать div, который можно включать и выключать, вам необходимо следующее:
- Ссылка для управления div путем включения и выключения при нажатии.
- Див, чтобы показать и скрыть.
- CSS для стилизации div скрытый или видимый.
- JavaScript для выполнения действия.
Управляющая ссылка
Контрольная ссылка – самая простая часть. Просто создайте ссылку, как вы бы на другую страницу. Пока оставьте атрибут href пустым.
Разместите это где-нибудь на своей веб-странице.
Див, чтобы показать и скрыть
Создайте элемент div, который хотите показать и скрыть. Убедитесь, что у вашего div есть уникальный идентификатор. В этом примере уникальным идентификатором является Learn HTML .
CSS, чтобы показать и скрыть Div
Создайте два класса для вашего CSS: один, чтобы скрыть div, а другой, чтобы показать его. У вас есть два варианта для этого: отображение и видимость.
Display удаляет div из потока страниц, а видимость просто меняет его вид. Некоторые кодеры предпочитают display , но иногда visibility также имеет смысл. Например:
Если вы хотите использовать видимость, измените эти классы на:
Добавьте скрытый класс в ваш div, чтобы он начинался как скрытый на странице:
JavaScript, чтобы заставить его работать
Все, что делает этот скрипт, это смотрит на текущий класс, установленный в вашем div, и переключает его на unhidden, если он помечен как скрытый, или наоборот.
Это всего лишь несколько строк JavaScript. Поместите следующее в заголовок вашего HTML-документа (перед тегом:
Что делает этот скрипт, строка за строкой:
Вызывает функцию unhide , а divID является точным уникальным идентификатором, который вы хотите показать или скрыть.
Устанавливает переменную i tem со значением вашего div.
Выполняет простую проверку браузера; если браузер не поддерживает getElementById , этот скрипт не будет работать.
Проверяет класс на div. Если он скрыт , он заменяет его на unhidden . В противном случае он заменяет его на скрытый .
Закрывает оператор if .
Чтобы скрипт работал, нужно сделать еще одну вещь. Вернитесь к своей ссылке и добавьте javascript в атрибут href. Обязательно используйте точный уникальный идентификатор, который вы назвали своим div в этом href:
Поздравляем! Теперь у вас есть div, который будет отображаться и скрываться при каждом нажатии на ссылку.
Возможные проблемы, которые нужно остерегаться
Этот сценарий не является надежным. В некоторых ситуациях это может вызвать проблемы для вас:
JavaScript не включен. Если у ваших читателей нет JavaScript или он отключен, этот скрипт не будет работать. Скрытые элементы остаются скрытыми независимо от того, что делают ваши читатели.Один из способов исправить это – поместить скрытые элементы div в область noscript, но вам придется поэкспериментировать с этим, чтобы они правильно отображались.
Слишком много контента. Это может быть отличным инструментом, позволяющим вашим читателям видеть только тот контент, который им нужен, но если вы поместите слишком много в скрытые элементы div, это может существенно повлиять на загрузку страницы. Помните, что, несмотря на то, что контент не отображается, веб-браузер все еще загружает его, поэтому будьте внимательны, сколько контента вы скрываете.
Клиенты не понимают. Наконец, клиенты могут не привыкать нажимать на ссылку, которая показывает или скрывает контент. Поиграйте с иконками (плюс знаки и стрелки работают хорошо) или текстом, чтобы объяснить, что будет с вашими клиентами. Другое решение – оставить один из элементов div открытым, а остальные – закрытым. Это может донести идею до ваших клиентов, чтобы они могли быстрее понять, как открыть оставшийся контент.
Вы всегда должны тестировать динамический HTML таким образом со своими клиентами. Как только вы почувствуете, что они могут понять и использовать его, это может стать отличным способом получения большого количества контента на ваших веб-страницах, не занимая много видимого пространства.
Скрыть текст с помощью css
используя css, я хочу заменить текст моим фактическим логотипом. У меня нет проблем с логотипом, изменив размер тега и поместив фоновое изображение через css. Однако я не могу понять, как избавиться от текста. Я видел это раньше, в основном, выталкивая текст с экрана. Проблема в том, что я не могу вспомнить, где я его видел.
29 ответов
Это один из способов:
здесь еще один способ чтобы скрыть текст, избегая при этом огромное поле 9999 пикселей, которое браузер создаст:
почему бы просто не использовать:
просто добавить font-size: 0; к вашему элементу, который содержит текст.
самый кросс-браузерный дружественный способ-написать HTML как
затем используйте CSS, чтобы скрыть промежуток и заменить изображение
Если вы можете использовать CSS2, то есть несколько лучших способов использования content свойство,но, к сожалению, веб еще не 100% там.
Джеффри Зельдман предлагает следующее решение:
это должно быть менее ресурсоемким, чем -9999px;
пожалуйста, читайте об этом здесь:
скрытие текста с учетом доступности:
В дополнение к другим ответы, а вот еще один полезный подход для скрытия текста.
этот метод эффективно скрывает текст, но позволяет оставаться видимым для чтения с экрана. Это вариант для рассмотрения, если доступность является проблемой.
стоит отметить, что этот класс используется в настоящее время в Bootstrap 3.
Если вы заинтересованы в чтении о доступности:
посмотреть mezzoblue для хорошего резюме каждой техники, с сильными и слабыми сторонами, а также пример html и css.
не используйте < display:none; >Это делает контент недоступен. Вы хотите, чтобы читатели экрана видели ваш контент и визуально стилизовали его, заменив текст изображением (например, логотипом). Используя text-indent: -999px; или аналогичный метод, текст все еще есть — просто визуально нет. Использовать display:none , и текст пропал.
так много сложных решений.
самый простой-просто использовать:
вы можете использовать css background-image собственность и z-index чтобы изображение оставалось перед текстом.
почему бы вам не использовать:
Если у вас нет элемента span или div, он отлично работает для ссылок.
ответ заключается в создании промежутка со свойством
вы можете найти пример в этот сайт
Это на самом деле область созрела для обсуждения, со многими тонкими методами, доступными. Важно, чтобы вы выбрали / разработали технику, которая отвечает вашим потребностям, включая: считыватели экрана, комбинации изображений/css/сценариев включения / выключения, seo и т. д.
вот некоторые хорошие ресурсы, чтобы начать работу по дороге замены изображения standardista техники:
выше также хорошо работает в последнем Thunderbird.
используйте тег условия для другого браузера и используя css, который вы должны разместить height:0px и width:0px также вы должны поставить font-size:0px .
если дело просто в том, чтобы сделать текст внутри элемента невидимым, установите атрибут color на 0 непрозрачность, используя значение rgba, такое как color:rgba(0,0,0,0); чистый и простой.
попробуйте этот код, чтобы сократить и Скрыть текст
или скрыть использование в вашем классе css .hidetxt
repalce содержание с CSS
Я обычно использую:
если мы можем редактировать разметку, жизнь может быть проще, просто удалите текст и будьте счастливы. Но иногда разметка была размещена JS-кодом или нам просто не разрешено ее редактировать, слишком плохо, что css оказался единственным оружием, размещенным в нашем распоряжении.
мы не можем поставить <span> обертывание текста и скрытие всего тега. Кстати, некоторые браузеры не только скрывают элементы с помощью display:none но также отключает компоненты внутри.
и font-size:0px и color:transparent может быть хорошо решения, но некоторые браузеры их не понимают. Мы не можем на них положиться.
используя overflow:hidden обеспечивает нашу ширину и высоту. Некоторые браузеры (не будут их называть. IE) может читать ширину и высоту как min-width и min-height . Я хочу предотвратить расширение коробки.
через нулевое значение font-size и line-height в элементе делает трюк для меня:
чтобы скрыть текст из html, используйте свойство text-indent в css
/ * для динамического текста вам нужно добавить пробел, чтобы ваш примененный css не беспокоил. nowrap означает, что текст никогда не будет переноситься на следующую строку, текст продолжается на той же строке до <br> встречается тег
Я не помню, где я взял это, но успешно использовал его в течение многих лет.
мой mixin находится в sass, однако вы можете использовать его так, как считаете нужным. Для хорошей меры я обычно держу .hidden класса где-то в моем проекте, чтобы прикрепить к элементам, чтобы избежать дублирования.
один из способов добиться этого-использовать :before или :after . Я использовал этот подход в течение нескольких лет и особенно отлично работает с векторными значками глифа.
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
HTML-разметка:
Первое что можно сделать, это установить высоту блока, а лишнее скрыть с помощью overflow: hidden .
Результат будет не очень информативный:
Многоточие
Свойство text-overflow: ellipsis добавляет многоточие к скрываемому тексту и работает только в паре с white-space: nowrap (отменяет переносы строк). Но можно сделать такой приём для нескольких строк текста с помощью свойств display: -webkit-box и -webkit-line-clamp: 4 .
Результат:
Градиент по тексту
В конец блока с текстом можно наложить абсолютный элемент с градиентом от прозрачного до белого, так получится эффект «затухания».
Результат:
Второй вариант с затуханием сверху вниз:
Результат:
Если используется фоновое изображение, то подойдёт вариант с использованием background-clip: text – наложение изображения или градиента на текст.