скрыть div
Показать скрыть блок DIV
Приветствую всех. Не могу справиться с задачкой. Пример следующий, имеется текст: <div.
Как отключить (не скрыть)
Имеется блок, нужно его отключить, не скрыть, а именно отключить. Есть ли такой параметр? Есть.
Как можно скрыть и показать div id ?
допустим у меня есть менюшка <div > <input type="radio" name="tabs".
Как скрыть блок Div на большом разрешении
Добрый вечер меня интересует как правильно скрыть блок Div на большом разрешении ( пк). Подскажите.
3106 / 2591 / 1219
Регистрация: 14.05.2014
Сообщений: 7,236
Записей в блоге: 1
Сообщение от Andrey735 
div style=""> /div>
div style="display:none"> /div>
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Возможно ли через css скрыть блок div?
Все привет. возник такой вопрос, возможно ли через css скрыть блок div, чтобы не отображался.
Скрыть часть текста, вышедшего за пределы div
Привет, мир! Помогите пожалуйста, нужно сделать так как на картинке (уже перепробовал куча.
CSS!? Div в div’e, как не потерять позиции css внутреннего div’a при изменении размера браузера?
вот когда изменяю размер браузера, то внутренний div не хочет изменяться вместе с контейнером, а.
перекрывает 2 других . Не отображается
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN".
Резиновый размер div’a, размер div’a в зависимости от расположения div’ов в нем
Надо чтобы div "telo" растягивался в зависимости от дивов которые находятся в нем. тоесть должен.
Растянуть div в высоту на 100% или на занимаемое пространство вложенного div
Ситуация такая, есть див-1, в нем несколько дивов. Див-1 осуществляет роль фоновой картинки(т.е.
Скрыть блок div через css
Здравствуйте, есть несколько дивов, формируются через php, в итоге получается такой код:
Текст для показа Текст который надо скрыть Текст для показа Текст который надо скрыть Хочется, чтобы по умолчанию дивы order_item были скрыты, а при нажатии на ссылку «Текст для показа» отображались. Хочется это все сделать на css, знаю что там есть атрибут display:none , но как сделать ссылку, при нажатии которой, свойство бы менялось, а тем более когда несколько блоков, не могу понять.
Отслеживать
задан 8 фев 2018 в 7:45
21 1 1 серебряный знак 2 2 бронзовых знака
С помощью css ? Почему не JS ?
8 фев 2018 в 7:48
можно и с помощью js, но с ним я пока не дружу
8 фев 2018 в 7:52
Как Вы понимаете, в css нету обработчика нажатия на блок. По-этому, Вы вынуждены использовать js.
CSS стили: способы скрыть элемент CSS
Скрыть элементы в css можно, используя стили CSS множеством способов. Ты можешь скрыть при помощи установки opacity на 0, visibility на hidden, display на none или установить крайние значения до самого конца.
Вы когда-либо задавались вопросом, почему так много методов сокрытия элементов, хотя конечная цель у них одна?
Но на самом деле все методы различаются друг от друга, и их особенности подскажут нам когда использовать тот или иной метод. В данной статье будут рассмотрены лишь небольшие различия методов, которые Вы должны учесть при их использовании, когда хотите пользоваться стилями CSS скрыть элемент.
1 метод скрываем элемент с помощью: Opacity — (непрозрачность)
Данное свойство Opacity устанавливает прозрачность элемента. Он не предназначен изменять саму контурную рамку у элемента. Это значит, что установив Opacity до 0, визуально элемент скроется, но по прежнему буде занимать свое место на веб-странице и влиять ее макет. А также будет реагировать на действие пользователя.
.hide
Если собираетесь использовать свойство Opacity для скрытие элемента от чтения, то это неудачный метод, так как он будет доступен для чтения как и остальные элементы веб-страницы, другими словами вы не ощутите разницу с использованием Opacity и без него.
Хотелось бы отметить, что свойство opacity можно анимировать и использовать несколько отличных эффектов.
Взгляните на следующее html и css
123
div < padding: 60px; width: 60px; font-size: 3em; background: pink; text-align: center; margin: 1%; display: inline-block; float: left; cursor: pointer; font-family: 'Lato'; >.o-hide < opacity: 0; transition: all ease 0.8s; >.o-hide:hover
При наведении курсора на скрытый второй блок, элемент переходит плавно от непрозрачности к полной прозрачности. Блок имеет cursor для pointer чтобы показать возможность взаимодействия.
2 метод скрытия элемента с помощью стилей CSS: Visibility — (видимость)
Следующим свойством нашего списка — Visibility , установив который поможет скрыть наш элемент. Данное свойство, как и opacity по прежнему влияет на макет нашей веб — страницы. Отличительной чертой является то, что он не будет фиксировать любое взаимодействие пользователя, когда на элементы установлено свойство — скрытое от пользователей. Элемент будет не доступен для чтения с экрана. Данное свойство можно настроить, задавая начальные и конечные значения, таким образом переход между различным состоянием видимости будет мягким, плавным, без резкости.
.hide
В примере можно наблюдать различия visibility от opacity
12
3
div < padding: 60px; width: 60px; font-size: 3em; background: pink; text-align: center; margin: 1%; display: inline-block; float: left; cursor: pointer; font-family: 'Lato'; >.o-hide < visibility: hidden; transition: all ease 0.8s; >.o-hide:hover < visibility: visible; >.o-hide p
var oHide = document.querySelector(".o-hide"); var oHideP = document.querySelector(".o-hide p"); var count = oHideP.innerHTML; oHide.addEventListener("click", function()< count++; oHideP.innerHTML = count; >);
Обратите внимание, что будущие элементы с установленным visibility скрыты до их обнаружения. попробуйте навести через скрытый элемент, а не на содержание внутри, вы обнаружите, что курсор не изменился на указатель. Кроме того если вы попытаетесь щелкнуть на элементе, то клик не отменятся.
Через тег
, внутри тега , по-прежнему улавливаются все события мыши.
Как только вы наведете курсор на текс в то он сам становится видимым и начинает регистрировать на события.
3 метод, скрываем с помощью: Display — (отражение)
Свойство display скрывает элемент в прямом смысле этого слова. Установка display на none гарантирует, что box-model не формируется вовсе. Используя это свойство, при скрытии элемента, после не остается пустого пространства. Отличительным остается тот момент, что взаимодействие с пользователем невозможно пока стоит display на none , таким образом доступность для чтения будет невозможна, как — будто этот элемент и не существует.
Все будущие наши элементы также скрыты. Данное свойство не может быть анимировано, поэтому переходы между статусами всегда резкие.
Обратите внимание, что элемент доступен через DOM , Вы можете с ним работать как с любым другим элементом.
.hide
Посмотрите на CSS:
12
3
div < height: 60px; padding: 60px 0; width: 180px; font-size: 2em; line-height: 60px; background: pink; text-align: center; margin: 1%; display: block; float: left; cursor: pointer; font-family: 'Lato'; >.o-hide < display: none; transition: all ease 0.8s; >.o-hide:hover < display: block; >.o-hide p
var count = 0; var oHide = document.querySelector(".o-hide"); var firstDiv = document.querySelector("div:nth-child(1)"); firstDiv.addEventListener("mouseover", function()< count++; oHide.innerHTML = '' + count + '
'; >); firstDiv.addEventListener("click", function()< oHide.style.display = "block"; >);
Вы увидите, что у второго блока есть пункт с набором свойств display , но он остается невидимым. Это еще одно отличие между visibility:hidden и display:none . В первом случае происходящее с установленным свойством visibility остается видимым, это не то что происходит с display . Все блоки остаются скрытыми независимо от определенного свойства display .
Теперь наведите курсор несколько раз для сравнение с первым блоком в демо. Задержались? Нажмите на первом блоке. Это должно сделать второй блок невидимым. Внутреннее значение это число отличное от нуля. Это происходит потому, что на элемент, несмотря на то, что он скрыт, можно влиять с помощью JavaScript .
4 метод, скроем при помощи: Position — (позиционирование)
Предположим, Вы хотите поработать с элементом, но не хотите чтобы это отразилось на макете веб-страницы. Никакое свойство, рассмотренное ранее, не могло справиться с этим должным образом. Единственное, что Вы можете сделать в этой ситуации — вынуть данный элемент их окна просмотра. Это действие не повлияет на макет веб — страницы и будет по прежнему активным.
Используя СSS можно сделать:
.hide
В предложенной демонстрации иллюстрируется как нужное перемещение скрывает элемент и работает в основном также как и в предыдущем примере:
Hover!0
0
div < height: 60px; padding: 60px 0; width: 180px; font-size: 2em; line-height: 60px; background: pink; text-align: center; margin: 1%; display: block; float: left; cursor: pointer; font-family: 'Lato'; >.o-hide < position: absolute; top: -9999px; left: -9999px; >.o-hide:hover
var count = 0; var oHide = document.querySelector(".o-hide"); var firstDiv = document.querySelector("div:nth-child(1)"); firstDiv.addEventListener("mouseover", function()< count++; oHide.innerHTML = count; >); firstDiv.addEventListener("click", function()< oHide.style.position = "static"; >);
Здесь основная задача — установить отрицательные крайние верхнее и нижнее значения максимально для долгого исчезновения с экрана нужного элемента. Одним из преимуществ (потенциальный недостаток) метода — это то, что содержимое — абсолютно позиционируемый элемент и читается с экрана.
Это вполне понятно, так как вы переместили элемент из окна просмотра и его не может увидеть пользователь.
Нельзя использовать данный метод на элементы, которые могли бы получить фокус, поскольку может привести неожиданным переходам, при фокусировании на данном элементе. Этот метод часто используется для создания пользовательских переключателей или кнопок радио.
5 метод, скрываем элемент с помощью: Clip-path — (скрепленный путь)
Eще одним из способов скрытие элементов — это скрепление их. Раньше это можно было сделать с помощью свойства clip , но это устаревшее свойство, гораздо современнее признано — clip-path .
Имейте ввиду, что свойство clip-path , которое используется ниже, сейчас может не поддерживаться в IE.
Если используете внешние файл SVG в ваших clip-path , поддерживание еще более ограничено (что не относится к нижеперечисленному). Свойство clip-path для скрытия элементов выглядит так:
.hide
Здесь можно посмотреть действие:
Hover!00
div < height: 60px; padding: 60px 0; width: 180px; font-size: 2em; line-height: 60px; background: pink; text-align: center; margin: 1%; display: block; float: left; cursor: pointer; font-family: 'Lato'; >.o-hide
var count = 0; var oHide = document.querySelector(".o-hide"); var firstDiv = document.querySelector("div:nth-child(1)"); firstDiv.addEventListener("mouseover", function()< count++; oHide.innerHTML = count; >); firstDiv.addEventListener("click", function()< oHide.className = ""; >);
Если Вы наведете курсор на первый элемент, это повлияет на второй элемент, не смотря на то, что он скрыт свойством clip-path . Если Вы щелкните на элемент это выведет скрытый тип, чтобы показать наш элемент, которые были там вместе. Этот текст останется доступным для чтения с экрана и это свойство используется вместе с clip во многих сайтах на WordPress.
Даже, если скрытый элемент не видно, все элементы вокруг работают также и имеют первоначальные прямоугольные размеры. Имейте ввиду, что взаимодействие пользователя как при наведении так и при клике невозможно за пределами определенной области. В нашем случае это означает, что нет прямого взаимодействия пользователя со скрытым элементом. Это свойство может быть анимировано различными способами для создания новых эффектов.
Вывод:
В этой статье было рассмотрено 5 методов скрытия элементов с помощью CSS . Каждое свойство отличается друг от друга, и зная, что Вы хотите достичь, можете уже пользоваться конкретным свойством, что достаточно важно для веб — разработчиков.
JavaScript показать и скрыть элемент с текстом
При разработке любых сайтов или интернет магазинов, требуется динамически скрывать и показывать элементы. Современные сайты должны выглядеть динамично, иначе цена разработки сайта будет очень низкой, т.к. ни кто много за статичный сайт платить не будет!
Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами.
Изменение видимости элемента достигается за счет изменения css-свойства display. Если display = ‘block’, то элемент будет видим, если ‘none’, то скрыт.
Сейчас напишем небольшой примерчик, в нем при нажатии на ссылку мы будем показывать блок, а при повторном нажатии скрывать.
Вот исходный код примера, с подробным описанием:
JavaScript показать и скрыть элемент с текстом | Дизайн студия OX2 Скрыть/Показать элемент
При разработке любых сайтов или интернет магазинов, требуется динамически скрывать и показывать элементы. Современные сайты должны выглядеть динамично, иначе цена разработки сайта будет очень низкой, т.к. ни кто много за статичный сайт платить не будет! Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами.
OX2 2014-10-05 2014-10-05
Комментарии (Написать комментарий)
Elka [02.02.2016]
Комментарий:
Огромное спасибо))
mr [02.01.2016]
Комментарий:
спосибоооооооооооооооооооооооооооооооооооооооооооооо
vbrb [21.12.2015]
Комментарий:
СПасибо!
Иван Сергеевич [16.05.2015]
Комментарий:
Спасибо, мне очень помог данный пример