Có thẻ nào trong HTML sẽ chỉ hiển thị nội dung của nó nếu JavaScript được bật không? Tôi biết <noscript>hoạt động ngược lại, hiển thị nội dung HTML của nó khi JavaScript bị tắt. Nhưng tôi chỉ muốn hiển thị biểu mẫu trên một trang web nếu JavaScript có sẵn, cho họ biết lý do tại sao họ không thể sử dụng biểu mẫu nếu họ không có.
Cách duy nhất tôi biết cách thực hiện việc này là sử dụng document.write();phương thức trong thẻ script và nó có vẻ hơi lộn xộn đối với một lượng lớn HTML.
Câu trả lời:
Cách dễ nhất mà tôi có thể nghĩ ra:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>Không có document.write, không có script, CSS thuần túy.
display: none !important, để tránh nó bị ghi đè bởi các quy tắc cụ thể hơn (ví dụ: bởi bộ chọn id hoặc css), nhằm mục đích sử dụng nó khi các tập lệnh được bật.
<noscript>lần đầu tiên bạn làm mới trang sau khi tắt Javascript trong tùy chọn. Bạn cần nhấn tải lại hai lần để nó hoạt động.
Tôi không thực sự đồng ý với tất cả các câu trả lời ở đây về việc nhúng HTML trước và ẩn nó bằng CSS cho đến khi nó được hiển thị lại với JS. Ngay cả khi đã bật JavaScript, nút đó vẫn tồn tại trong DOM. Đúng, hầu hết các trình duyệt (ngay cả các trình duyệt hỗ trợ tiếp cận) sẽ bỏ qua nó, nhưng nó vẫn tồn tại và có thể có những lúc kỳ lạ khi điều đó quay trở lại cắn bạn.
Phương pháp ưa thích của tôi là sử dụng jQuery để tạo nội dung. Nếu đó là nhiều nội dung, thì bạn có thể lưu nó dưới dạng phân đoạn HTML (chỉ HTML bạn muốn hiển thị và không có thẻ html, body, head, v.v.) sau đó sử dụng các hàm ajax của jQuery để tải nó vào trang đầy đủ.
<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>Trước hết, hãy luôn tách biệt nội dung, đánh dấu và hành vi!
Bây giờ, nếu bạn đang sử dụng thư viện jQuery (bạn thực sự nên làm vậy, nó làm cho JavaScript dễ dàng hơn rất nhiều), đoạn mã sau sẽ thực hiện:
$(document).ready(function() {
$("body").addClass("js");
});Điều này sẽ cung cấp cho bạn một lớp bổ sung trên phần thân khi JS được bật. Bây giờ, trong CSS, bạn có thể ẩn khu vực khi lớp JS không có sẵn và hiển thị khu vực khi có JS.
Ngoài ra, bạn có thể thêm no-jslàm lớp mặc định cho thẻ body của mình và sử dụng mã này:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});Hãy nhớ rằng nó vẫn được hiển thị nếu CSS bị tắt.
Tôi có một giải pháp đơn giản và linh hoạt, hơi giống với của Will (nhưng với lợi ích bổ sung là html hợp lệ):
Cung cấp cho phần tử body một lớp "jsOff". Loại bỏ (hoặc thay thế) điều này bằng JavaScript. Có CSS để ẩn bất kỳ phần tử nào có lớp là "jsOnly" với phần tử mẹ có lớp là "jsOff".
Điều này có nghĩa là nếu JavaScript được bật, lớp "jsOff" sẽ bị xóa khỏi nội dung. Điều này có nghĩa là các phần tử có lớp "jsOnly" sẽ không có phần tử cha có lớp "jsOff" và do đó sẽ không khớp với bộ chọn CSS ẩn chúng, do đó chúng sẽ được hiển thị.
Nếu JavaScript bị tắt, lớp "jsOff" sẽ không bị xóa khỏi nội dung. Các phần tử có "jsOnly" sẽ có phần tử cha là "jsOff" và do đó sẽ khớp với bộ chọn CSS ẩn chúng, do đó chúng sẽ bị ẩn.
Đây là mã:
<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>Đó là html hợp lệ. Nó đơn giản. Nó linh hoạt.
Chỉ cần thêm lớp "jsOnly" vào bất kỳ phần tử nào mà bạn muốn chỉ hiển thị khi JS được bật.
Xin lưu ý rằng JavaScript loại bỏ lớp "jsOff" phải được thực thi càng sớm càng tốt bên trong thẻ body. Nó không thể được thực thi sớm hơn, vì thẻ body sẽ chưa ở đó. Nó không nên được thực thi sau đó vì điều đó có nghĩa là các phần tử có lớp "jsOnly" có thể không hiển thị ngay lập tức (vì chúng sẽ khớp với bộ chọn CSS ẩn chúng cho đến khi lớp "jsOff" bị xóa khỏi phần tử body).
Điều này cũng có thể cung cấp một cơ chế để tạo kiểu chỉ js (ví dụ .jsOn .someClass{}) và kiểu không chỉ js (ví dụ .jsOff .someOtherClass{}). Bạn có thể sử dụng nó để cung cấp một giải pháp thay thế cho <noscript>:
.jsOn .noJsOnly{
display:none;
}Đây là một ví dụ cho cách ẩn div:
<!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>(Có thể bạn sẽ phải chỉnh sửa nó cho IE kém, nhưng bạn có ý tưởng.)
Giải pháp của tôi
.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>Bài viết của Alex xuất hiện ở đây, tuy nhiên nó chỉ áp dụng được nếu bạn đang sử dụng ASP.NET - tuy nhiên nó có thể được mô phỏng bằng JavaScript nhưng một lần nữa bạn phải sử dụng document.write ();
Bạn có thể đặt khả năng hiển thị của đoạn văn | div thành 'ẩn'.
Sau đó, trong chức năng 'onload', bạn có thể đặt khả năng hiển thị thành 'hiển thị'.
Cái gì đó như:
<body onload = "javascript: document.getElementById (rec) .style.visibility = display"> <p style = "vision :osystem" id = "rec"> Văn bản này sẽ bị ẩn trừ khi có javascript. </p>
Không có thẻ cho điều đó. Bạn sẽ cần sử dụng javascript để hiển thị văn bản.
Một số người đã đề xuất sử dụng JS để đặt động CSS hiển thị. Bạn cũng có thể tạo động văn bản bằng document.getElementById(id).innerHTML = "My Content"hoặc tạo động các nút, nhưng cách hack CSS có lẽ là cách dễ đọc nhất.
Trong thập kỷ kể từ khi câu hỏi này được đặt ra, HIDDENthuộc tính này đã được thêm vào HTML. Nó cho phép người ta ẩn trực tiếp các phần tử mà không cần sử dụng CSS. Như với các giải pháp dựa trên CSS, phần tử phải được ẩn bằng script:
<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>