Скрыть скрипт. Как включить javascript в браузере — Инструкция для всех версий. Удалить элемент с помощью class

При включенном джаваскрипте вы не увидите изменений. Зато при отключённом вместо нерабочей ссылки перед вами откроется картинка в новом окне.

Описание: Бывают ситуации, когда не хочется выводить весь контент страницы сразу. Например, в разделе "FAQ " вывести только названия вопросов. А если человека заинтересует ответ на определённый вопрос, то он может открыть ответ, а когда просмотрит, то и закрыть. Это создаёт удобство страницы и её компактность. И для этого я подготовил простенький скрипт на JavaScript , позволяющий открыть, либо скрыть определённый текст (в общем случае, определённые элементы), то есть сделать скрытый текст на JavaScript .

Результат: Кликните мышкой по названию вопроса. Если Вы кликните ещё раз, то ответ вновь закроется.

Ответ №1.

Ответ №2.

Код JavaScript (вставлять между тегами и ):

function expandit(id){
obj = document.getElementById(id);
if (obj.style.display=="none") obj.style.display="";
else obj.style.display="none";
}

Код HTML (вставлять между тегами и ):

Вопрос №1
Ответ №1.
Вопрос №2
Ответ №2.

Простейшее решение, позволяющее показать/скрыть HTML-элемент документа, используя JavaScript. Подробно описание сути процесса и его особенностей.

Обычными средствами срыть (англ. hide ) или показать (англ. show ) HTML-элемент документа не представляется возможным. Для этого используется CSS-свойство display или visibility . Отличие между ними состоит в том, что visibility , хоть и делает HTML-элемент невидимым, но место, которое он занимает, остаётся за ним. Понятно, что гораздо чаще используется именно display .

display (с англ. отображение ) – многоцелевое свойство, которое определяет, как элемент должен отображаться в документе.

Список возможных значений CSS-свойства display , понимаемых различными браузерами, не велик, но и этого вполне достаточно.

• block — элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега SPAN , заставляет его вести подобно блокам, т.е. происходит перенос строк в начале и конце содержимого.
• inline — элемент отображается как встроенный. Применение этого значения для блочных элементов, например тега DIV , заставляет его вести подобно встроенным, т.е. его содержимое будет начинаться с того места, где окончился предыдущий элемент.
• list-item — элемент выводится как блочный и добавляется маркер списка.
• none — скрывает элемент в документе. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было.

Понятно, что для того, чтобы изменить CSS-свойство того или иного HTML-элемента необходимо использовать скриптовый язык программирования. В нашем случае это JavaScript. Но всё по порядку.

Первым делом надо определиться, как именно обратиться к HTML-элементу документа. Для этого можно воспользоваться методом getElemetById объекта document , который возвращает ссылку на HTML-элемент документа по значению атрибута id . Например:

document.getElemetById("test")

Теперь нам нужно получить доступ к свойствам стиля соответствующего HTML-элемента. Для этого используется свойство style . Например:

document.getElemetById("test").style.display

Остаётся лишь создать элемент управления, который бы выполнял смену значения CSS-свойства display , по какому либо событию, например onclick (клик мышью). Здесь стоит обратить внимание на тот факт, что для решения поставленной задачи, понадобится проверять текущее значение CSS-свойства display и менять его на «противоположное». В нашем случае, для скрытия, будем использовать значение none , а для отображения «пусто» . Во втором случае мы убираем CSS-свойство display в соответствующем элементе, что позволит корректно работать как с блочными так и встраиваемыми HTML-элементами.

Для наглядности приведу следующий пример:

function change(idName) { if(document.getElementById(idName).style.display=="none") { document.getElementById(idName).style.display = ""; } else { document.getElementById(idName).style.display = "none"; } return false; } Hi World! Change

Обратите внимание, что тег DIV имеет атрибут style со значением display:none . Таким образом? мы задаём значение CSS-свойства display по умолчанию равное none , т.е. HTML-элемент изначально будет скрыт.

Есть множество вариантов того, как можно скрыть ненужные элементы в HTML. Мы рассмотрим в этой статье как это можно сделать с помощью CSS, JavaScript или jQuery. Если у вас есть еще какие-нибудь варианты — то пишите их в комментарии.

В CSS множество разных способов того, как можно скрыть элемент. Ниже показы примеры того, как это чаще всего осуществляется.

HTML пример

этот блок нужно спрятать

CSS пример

Sidebar {display: none;}

.

HTML пример

этот блок нужно спрятать

CSS пример

#sidebar {display: none;}

Код выше скроет все элементы на странице с .

В случае, если у вас нет id или class у элемента, то его все равно можно скрыть. Альтернативно можно использовать другие атрибуты, как показано в примере ниже.

HTML пример

Ссылка

CSS пример

Container div:nth-child(2) {display: none} .

Container div:nth-child(2) спрячет второй div внутри блока.container.

div спрячет все div элементы со страницы, у которых есть data-id атрибуты со значением "hello-world" , если указать так , то это будет скрыты не только div элементы, но уже все элементы будут проверены на наличие такого атрибута и значения.

Вы так же можете убрать элемент другими свойствами CSS, например:

Sidebar { display: none; opacity: 0; z-index: -999; visibility: hidden; width: 0; height: 0; position: absolute; left: -9999; top: -9999; }

opacity: 0 — устанавливает прозрачность до 0, тем самым элемент совсем не будет показан на странице, чтобы снова показать нужно установить 0.1 (10% видимости элемента), 0.2, … 1.

z-index: -999 — устанавливает расположение слоя. Чем выше цифра, тем элемент, который вы хотите спрятать будет находиться выше других слоев. Например, если у слоя.sidebar стоит z-index: 999, а у.container стоит z-index: 100, то даже если поставить эти слои друг на друга, .sidebar все равно будет отображаться выше.container, так как index у него стоит выше.

visibility: hidden — схожее свойство с display: none

width: 0;height: 0; — если их поставить к нулю, то у вашего элемента высота и ширина будет равно 0, тем самым он вообще не будет показывать на экране.

position: absolute; left: -9999; top: -9999 — в данном случае, элемент переместиться за пределы экрана пользователя, тем самым не будет виден на странице

Элементы на странице так же можно скрыть при помощи jQuery. Вы должны сначала установить библиотеку jQuery, прежде чем начать пользоваться ее функциями.

Обращаться к элементам можно таким же образом, как и в CSS. Проблема CSS в том, что с его помощью можно только прятать элементы.

jQuery позволяет удалять элементы, чтобы они не были видны даже при рассмотрении исходного кода страницы.

Скрипт ниже удалить все элементы со страницы с классом sidebar.

HTML пример

Текст

jQuery пример

$(function() { $(document).ready(function() { $(".sidebar").remove(); }); });

Скрипт ниже удалить элемент со страницы с id sidebar.

HTML пример

Текст

jQuery пример

$(function() { $(document).ready(function() { $("#sidebar").remove(); }); });

$(function() { $(document).ready(function() { $("a").remove(); }); });

Таким образом можно удалить все что угодно на странице.

JavaScript очень мощный сам по себе, но не многие знаю как им пользоваться, так как для начинающего разработчика, язык является достаточно сложным. Ниже я написал несколько пример того, как можно скрыть элементы используя JavaScript.

HTML пример

Текст

JavaScript пример

document.getElementsByClassName("sidebar").remove()