Javascript 使用JS绘制水平规则
这可能是一个基本问题，但如何在Javascript中创建一条水平线（又称水平规则），类似于htmlJavascript 使用JS绘制水平规则,javascript,html,Javascript,Html,这可能是一个基本问题，但如何在Javascript中创建一条水平线（又称水平规则），类似于html标记？我希望能够设置它的颜色和厚度，就像标签允许的那样 我有一个网站，我需要在标签中执行此操作（以及一些附带的代码）。我不能使用，因为我的一些用户没有启用JS；因此，对于他们来说，标签内容都不会显示，但仍会显示（我不希望发生这种情况）。解决问题，首先： 我不能使用，因为我的一些用户没有启用JS；因此，对于他们来说，标记内容都不会显示，但仍会显示（我不希望发生这种情况） 您可以在JavaScript中
我有一个网站，我需要在
标签中执行此操作（以及一些附带的代码）。我不能使用
，因为我的一些用户没有启用JS；因此，对于他们来说，
标签内容都不会显示，但
仍会显示（我不希望发生这种情况）。解决问题，首先：
我不能使用
，因为我的一些用户没有启用JS；因此，对于他们来说，
标记内容都不会显示，但
仍会显示（我不希望发生这种情况）
您可以在JavaScript中将类添加到
元素中（如果不需要IE 9支持，请使用）：
然后设置
的样式，使其在不支持JavaScript的情况下不显示：
<hr class="hey-that’s-my-line" />
现在，回答您的问题：您可以使用domapi创建元素并将它们插入到文档中。在这个答案中要完全涵盖的内容有点多，但MDN已经做到了
var hr=document.createElement（'hr'）；
document.body.appendChild（hr）；//将其插入到的末尾；
//appendChild（）在任何节点的末尾插入，
//大体上
var ref=document.getElementById（'reference-point'）；
ref.parentNode.insertBefore（hr，ref）；//将其插入到元素之前
//id为“参考点”的
如果只想使用javascript在页面上创建HR元素，如下所示：
elem = document.createElement("hr"); //this will create a new element
/* Use setAttribute to define the property and values you'd like give the element */
elem.setAttribute("width", "100px");
/* Then you'll need to add the element to the page */
document.body.appendChild(elem);
您可以使用带有一些CSS的标准
元素来对noscript用户隐藏它
看看这个：使用和不使用javascript。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Noscript example</title>
<style>
/* this css is used by people with and without javascript */
/* a <link> tag would work as well, of course */
</style>
<noscript>
<style>
/* this is only visible by people without JS enabled */
hr {
display: none;
}
</style>
</noscript>
<script>
/* And this script only runs with JS (obviously) so by adding
a class name to the root element (<html>), we can also detect
it in CSS....
*/
document.documentElement.className += " with-js";
</script>
<style>
/* ...meaning we can target it with CSS like this too: */
html.with-js hr {
color: red;
}
</style>
</head>
<body>
Hi, before hr
<hr />
After hr
</body>
</html>
Noscript示例
/*这个css是由使用和不使用javascript的人使用的*/
/*当然，标签也可以*/
/*这仅在未启用JS的情况下才可见*/
人力资源{
显示：无；
}
/*这个脚本只运行JS（显然），所以添加
根元素（）的类名，我们还可以检测
它在CSS中。。。。
*/
document.documentElement.className+=“带js”；
/*…这意味着我们也可以将CSS作为目标：*/
html.with-js-hr{
颜色：红色；
}
嗨，在人力资源部之前
人力资源之后
标记是WAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA。它里面的任何内容只有不支持脚本的人才能看到，并且它可以包含任何内容：回退html、链接标记、样式标记等等
通过在其中添加样式标记，我可以使用CSS隐藏我不希望非脚本用户看到的元素
因此，我只需在它下面编写普通的HTML，所有用户都可以正常看到它——没有什么特别之处。然后，使用
作为特例，为没有脚本的人修改它
有时候顺便说一句，您希望只向脚本用户显示内容，而不是仅向非脚本用户隐藏内容。最简单的方法是使用javascript在html元素上粘贴一个类，然后使用CSS将该类名的后代作为目标。示例中接下来的几行显示了这一点。同样，您可以编写普通的HTML，然后在事实发生后对其进行修改，但这一次结合使用
来添加一个类和
来定位它
因此，使用JS查看此页面，您将看到一个红色的hr。如果没有JS，hr将不会显示。您是否考虑过将
与CSS显示一起使用：无在
块内？@AdamD.Ruppe：抱歉，我其实不知道。你能补充一下吗？我在一个样本中用了一些技巧来回答。一般来说，我总是尝试编写简单明了的HTML来满足我的需求，然后稍后使用javascript、css或noscript元素对其进行定制，以涵盖特殊情况。这样做往往会提供可读的源代码和良好的兼容性-基本html几乎适用于所有人！问题是JS对某些用户不可用。@Ryan啊，我误解了这个问题。谢谢
elem = document.createElement("hr"); //this will create a new element
/* Use setAttribute to define the property and values you'd like give the element */
elem.setAttribute("width", "100px");
/* Then you'll need to add the element to the page */
document.body.appendChild(elem);
<!DOCTYPE html>
<html>
<head>
<title>Noscript example</title>
<style>
/* this css is used by people with and without javascript */
/* a <link> tag would work as well, of course */
</style>
<noscript>
<style>
/* this is only visible by people without JS enabled */
hr {
display: none;
}
</style>
</noscript>
<script>
/* And this script only runs with JS (obviously) so by adding
a class name to the root element (<html>), we can also detect
it in CSS....
*/
document.documentElement.className += " with-js";
</script>
<style>
/* ...meaning we can target it with CSS like this too: */
html.with-js hr {
color: red;
}
</style>
</head>
<body>
Hi, before hr
<hr />
After hr
</body>
</html>