Чи є тег у HTML, який відображатиме його вміст лише увімкнено JavaScript? Я знаю, що <noscript>працює навпаки, відображаючи свій вміст HTML, коли JavaScript вимкнено. Але я хотів би відобразити форму лише на сайті, якщо JavaScript доступний, розповівши, чому вони не можуть використовувати форму, якщо її немає.
Єдиний спосіб, як я знаю, як це зробити, - це document.write();метод у тезі скрипту, і він здається трохи безладним для великої кількості HTML.
Відповіді:
Найпростіший спосіб, про який я можу придумати:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>Немає document.write, немає сценаріїв, чистий CSS.
display: none !important, щоб запобігти його перебору більш конкретними правилами (наприклад, селекторами id або css), які спрямовані на його використання при включенні сценаріїв.
<noscript>першого разу, коли ви оновлюєте сторінку після відключення Javascript у налаштуваннях. Вам потрібно двічі натиснути перезавантажити, щоб змусити його працювати.
Я не дуже погоджуюся з усіма відповідями тут щодо попереднього вбудовування HTML і приховування його за допомогою CSS, поки він знову не буде показаний з JS. Навіть без увімкненого JavaScript, цей вузол все ще існує в DOM. Правда, більшість браузерів (навіть браузери доступності) проігнорують це, але він все ще існує, і можуть виникнути незвичайні випадки, коли це повернеться до укусу.
Моїм кращим методом було б використання jQuery для створення вмісту. Якщо вмісту буде багато, то ви можете зберегти його як фрагмент HTML (лише HTML, який ви хочете показати, і жоден з тегів html, body, head тощо), тоді використовуйте функції ajax jQuery для завантаження його в повна сторінка.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.get('_test.html', function(html) {
$('p:first').after(html);
});
});
</script>
</head>
<body>
<p>This is content at the top of the page.</p>
<p>This is content at the bottom of the page.</p>
</body>
</html><p>This is from an HTML fragment document</p><p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>Перш за все, завжди розділяйте зміст, розмітку та поведінку!
Тепер, якщо ви використовуєте бібліотеку jQuery (ви дійсно повинні, це значно полегшує JavaScript), слід зробити наступний код:
$(document).ready(function() {
$("body").addClass("js");
});Це дасть вам додатковий клас на корпусі, коли JS увімкнено. Тепер у CSS ви можете приховати область, коли клас JS недоступний, і показати область, коли JS доступна.
Крім того, ви можете додати no-jsдо тегу body як клас за замовчуванням і використовувати цей код:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});Пам'ятайте, що він все одно відображається, якщо CSS відключений.
У мене є просте і гнучке рішення, дещо схоже на те, що у Вілла (але з додатковою перевагою, що є дійсним html):
Дайте елементу тіла клас "jsOff". Видаліть (або замініть) це за допомогою JavaScript. Потрібно CSS приховати будь-які елементи з класом "jsOnly" з батьківським елементом з класом "jsOff".
Це означає, що якщо JavaScript увімкнено, клас "jsOff" буде видалений з тіла. Це означатиме, що елементи з класом "jsOnly" не матимуть батьків з класом "jsOff" і тому не будуть відповідати селектору CSS, який їх приховує, таким чином вони будуть показані.
Якщо JavaScript відключений, клас "jsOff" не буде видалений з тіла. Елементи з "jsOnly" матимуть батьків з "jsOff", і так вони відповідають селектору CSS, який їх приховує, таким чином вони будуть приховані.
Ось код:
<html>
<head>
<!-- put this in a separate stylesheet -->
<style type="text/css">
.jsOff .jsOnly{
display:none;
}
</style>
</head>
<body class="jsOff">
<script type="text/javascript">
document.body.className = document.body.className.replace('jsOff','jsOn');
</script>
<noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>
<p class="jsOnly">I am only shown if JS is enabled</p>
</body>
</html>Це дійсний html. Це просто. Це гнучко.
Просто додайте клас "jsOnly" до будь-якого елемента, який потрібно відображати лише тоді, коли JS увімкнено.
Зауважте, що JavaScript, який видаляє клас "jsOff", повинен бути виконаний якомога раніше всередині тегу body. Його не можна виконати раніше, оскільки тег body ще не буде. Він не повинен бути виконаний пізніше, оскільки це означатиме, що елементи з класом "jsOnly" можуть бути не видно відразу (оскільки вони будуть відповідати селектору CSS, який їх приховує, поки клас "jsOff" не буде видалений з елемента тіла).
Це також може забезпечити механізм стилів лише для js (наприклад .jsOn .someClass{}) та стилів, які не є js (наприклад .jsOff .someOtherClass{}). Ви можете використовувати його для надання альтернативи <noscript>:
.jsOn .noJsOnly{
display:none;
}Ось приклад для прихованого способу діви:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*[data-when-js-is-on] {
display: none;
}
</style>
<script>
document.getElementsByTagName("style")[0].textContent = "";
</script>
</head>
<body>
<div data-when-js-is-on>
JS is on.
</div>
</body>
</html>(Напевно, вам доведеться налаштувати це на поганий IE, але ви отримаєте ідею.)
Моє рішення
.css:
.js {
display: none;
}.js:
$(document).ready(function() {
$(".js").css('display', 'inline');
$(".no-js").css('display', 'none');
});.html:
<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>Стаття Алекса тут враховує , однак вона застосовна лише в тому випадку, якщо ви використовуєте ASP.NET - вона може бути емульована в JavaScript, проте знову ж доведеться використовувати document.write ();
Ви можете встановити видимість абзацу | div у "прихований".
Потім у функції "onload" ви можете встановити видимість на "видимий".
Щось на зразок:
<body onload = "javascript: document.getElementById (rec) .style.visibility = видимий"> <p style = "vidibility: visible" id = "rec"> Цей текст потрібно приховати, якщо JavaScript не доступний. </p>
Для цього немає тегів. Вам потрібно буде використовувати javascript для показу тексту.
Деякі люди вже запропонували використовувати JS для динамічного встановлення видимого CSS. Ви також можете динамічно генерувати текст за допомогою document.getElementById(id).innerHTML = "My Content"або динамічно створюючи вузли, але CSS-хак, мабуть, є найбільш простим для читання.
За десятиліття, з якого було задано це питання, HIDDENатрибут додано до HTML. Це дозволяє безпосередньо приховувати елементи без використання CSS. Як і у випадку з рішеннями на основі CSS, елемент повинен бути неприхований сценарієм:
<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>