使用JS绘制一条水平线

Using JS to draw a horizontal rule

本文关键字：水平线 一条 绘制 JS 使用      更新时间：2023-09-26

这可能是一个基本问题，但是如何在Javascript中制作水平线(又称水平线规则)，类似于html <hr>标记?我希望能够设置它的颜色和厚度，就像<hr>标签允许我的一样。

我有一个网站，我需要在<script>标签内这样做(以及一些伴随的代码)。我不能使用<hr>，因为我的一些用户没有启用JS;所以对于他们来说，没有<script>标签内容会显示，但<hr>仍然会显示(我不希望这种情况发生)。

首先解决问题:

我不能使用<hr>，因为我的一些用户没有启用JS;所以对于他们来说，没有<script>标签内容会显示，但<hr>仍然会显示(我不希望这种情况发生)。

你可以添加一个类到你的<html>元素在JavaScript(与classList，如果你不需要ie9的支持):

document.documentElement.className += ' has-js';

然后样式你的<hr>不出现，除非JavaScript支持:

<hr class="hey-that’s-my-line" />

.hey-that’s-my-line {
    display: none;
    /* change its height & colour here */
}
html.has-js .hey-that’s-my-line {
    display: block;
}

现在，回答您的问题:您可以使用DOM API创建元素并将它们插入文档中。要在这个答案中完全涵盖它有点多，但是MDN有一个很好的介绍。

var hr = document.createElement('hr');
document.body.appendChild(hr); // inserts it at the end of <body>;
                               // appendChild() inserts at the end of any node,
                               // generally
var ref = document.getElementById('reference-point');
ref.parentNode.insertBefore(hr, ref); // inserts it before the element
                                      // with the id 'reference-point'

如果你想用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);

您可以使用标准的<hr>元素和一些CSS来隐藏noscript用户。

看看这个:http://arsdnet.net/testo.html使用和不使用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>标签是有效的HTML从waaaaway回来，工作在任何地方。它里面的任何东西都只对没有脚本支持的人可见，它可以容纳任何内容:回退html，链接标签，样式标签，任何东西。

通过添加样式标签，我可以使用CSS隐藏不想让非脚本用户看到的元素。

所以我只是在它下面写一个普通的HTML，所有用户都可以看到，没有什么特别的。然后，使用<noscript><style>作为特殊情况，我为没有脚本的人修改了它。

有时候，您希望只向脚本用户显示内容，而不是只向非脚本用户隐藏内容。要做到这一点，最简单的方法是使用javascript将一个类粘贴到html元素上，然后使用CSS将该类名称的后代作为目标。示例中接下来的几行显示了这一点。同样，您编写普通的HTML，然后在事后修改它，但这次使用<script>的组合来添加一个类，并使用<style>来针对它。

所以用JS看这个页面，你会看到一个红色的hr。如果没有JS, hr将不会出现

相关文章：