gpt4 book ai didi

javascript - 仅在启用 JavaScript 时定义特定的 CSS 样式

转载 作者:行者123 更新时间:2023-11-29 22:05:11 26 4
gpt4 key购买 nike

我的网页包含一个 DIV。如果启用了 Javascript,我希望 DIV 在页面加载时不可见 ( display: none; )。如果 JS 被禁用,我希望它可见( display: block; )。

我能做到:

document.write('<div style="display:none;">...</div>');

document.getElementById('foo').style.display = 'none';

如果 JS 被禁用,第一个代码将不会有 DIV。对于第二个,DIV 将在页面加载时可见,并在 JS 执行时消失。

我太笨了,无法解决这个问题。

我可以将 JavaScript 放入 <div> 中吗? -tag 只写样式?当然不是这样的:

<div <script>document.write('style="display:none;"');</script>>

也许是这样的:

<div onLoad="document.write('<div style="display:none;">...</div>');">

有人有想法吗?

最佳答案

除非 JS 隐藏它,否则显示元素的一个问题是,即使打开 JS,该元素也可能会显示直到 JS 启动。因此,在文件顶部添加一些 JS 通常会更好直接类到根元素,以便在 CSS 加载之前进入。这是一个简单的例子(在我的新手 JS 中):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
(function() {
var root = document.querySelector('html');
root.className = "js";
}());
</script>
<style media="all">

div {width: 500px; height: 200px; background: blue;}
.js div {display: none;}

</style>
</head>
<body>

<div></div>

</body>
</html>

这比使用老式的 <noscript> 要好得多和 document.write()

编辑:我应该注意到一种更简单的方法来定位 html元素是 document.documentElement .因此,上面的代码可以写成——

<script>
(function() {
document.documentElement.className = "js";
}());
</script>

关于javascript - 仅在启用 JavaScript 时定义特定的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21350904/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com