[英]Is there a better way to hide/show elements based on the presence of JS?
目前在我網站的<head>中
<script>
document.write('<style>.jshide{display:none},.jsshow{display:block},.jsblank{visibility:hidden}</style>')
</script>
我的想法是，如果啟用了JS，我不想顯示我網站上的某些元素。 例如，可能有一個表單提交按鈕，因為如果啟用了JS，則該表單將使用ajax下拉列表代替。
頁面加載后，我可以用JS腳本以編程方式隱藏它們，但這會導致令人沮喪的閃爍等。
我已經有十年了，但我想知道在當今這個更現代的時代是否有更好的方法可以達到相同的最終目標？
謝謝
您不應該使用document.write 。 相反，使用
var style = document.createElement('style');
style.textContent = '.jshide{display:none}, .jsshow{display:block}, .jsblank{visibility:hidden}';
document.querySelector('head').appendChild(style);
除此之外，您的方法也很好。
逐步增強的方式將從
<html class="no-js">
然后使用javascript刪除該類：
<head>
<!-- your stuff -->
<script>
document.querySelector('html').classList.remove('no-js')
</script>
</head>
然后，您可以根據該類設置元素的樣式。
例：
html:not(.no-js) .jshide {
display: none;
}
html:not(.no-js) .jsshow {
display: block;
}
html:not(.no-js) .jsblank {
visibility: hidden;
}
您也可以做相反的事情，並添加一個js-enabled了js-enabled類（而不是刪除一個否定詞-在這里您需要考慮雙重否定詞）。 那將是：
<html>
<head>
<!-- your stuff -->
<script>
document.querySelector('html').classList.add('js-enabled')
</script>
</head>
...
在你的CSS：
html.js-enabled .jshide {
display: none;
}
html.js-enabled .jsshow {
display: block;
}
html.js-enabled .jsblank {
visibility: hidden;
}
它基本上執行與您相同的操作（切換樣式），不同之處在於，您無需觸摸DOM（或者至少不向其中添加新元素），並且將CSS保留在CSS文件中。
正如前面提到的（現在已刪除）答案中提到的，可能更慣用的方法是使用<noscript>和<style>元素。 不過，要完全做到這一點，需要重寫CSS來處理未加載腳本的情況，而不是加載腳本的情況。 為了快速起見，您可以覆蓋僅js元素的類，如下所示：
<head>
<style>
.jshide { display: none }
.jsshow { display: block }
.jsblank { visibility: hidden }
</style>
<noscript>
<style>
.jshide { display: block }
.jsshow { /* ?? */ }
.jsblank { visibility: initial }
</style>
</noscript>
</head>
HTML標簽<noscript>正是為此而考慮的。 僅當用戶禁用腳本或瀏覽器不支持腳本時，才會顯示其內容。 自html5起，在<body>和<head>允許使用。
使用此功能比提供的大多數其他答案有好處，因為它直接來自HTML規范，並且受所有瀏覽器支持。 由於它是本地的，因此無需執行任何“修補程序”。 在啟用javascript時隱藏您的元素會在頁面呈現和javascript下載/運行之間引起閃爍（有一些方法可以繞過大多數操作，但仍然可以...）。
我不喜歡使用javascript為非腳本用戶隱藏元素的另一件事是，實際上，使用腳本的每個人都會為此受到某種形式的懲罰，因為這會給他們帶來開銷。
有沒有更好的方法來顯示和隱藏大量元素，並取消選中“隱藏”復選框？
[英]Is there better way to show and hide lots of elements and uncheck checkboxes on hide?
如何基於Angular.js中另一個元素的存在顯示/隱藏元素
[英]how to show/hide an element based on the presence of another element in Angular.js
基於權限級別顯示/隱藏零件的最佳方法-Angular JS
[英]Best way to show/hide a part based on permission level - Angular JS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.