Question

这可能是一个基本问题，但是如何在Javascript中制作水平线（a.k.a水平线），类似于html <hr>标签？我希望能够设置其颜色和厚度，就像<hr>标签允许我一样。

我有一个网站，我需要在<script＆gt;内执行此操作标签（以及一些附带的代码）。我无法使用<hr>，因为我的一些用户没有启用JS;所以对于他们来说，<script>标签内容都不会显示，但<hr>仍会显示（我不希望这种情况发生）。

Answer 1

解决问题，首先：

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

如果您不需要IE 9支持，可以在JavaScript中为<html>元素添加一个类（classList}：

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有a good introduction。

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'

Answer 2

如果您只想使用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);

Answer 3

您可以使用标准<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>标记是来自waaaaay的有效HTML，可以在任何地方使用。其中的任何内容仅对没有脚本支持的人可见，并且它可以包含任何内容：回退html，链接标记，样式标记，任何内容。

通过在其中添加样式标记，我可以使用CSS隐藏我不希望非脚本用户看到的元素。

那么我只需在它下面编写普通的HTML，这对所有用户来说都是正常的 - 没什么特别的。然后，使用<noscript><style>我为没有脚本的人修改它作为特例。

有时btw，您只想向脚本用户显示内容，而不是仅隐藏来自非脚本用户的内容。最简单的方法是使用javascript在html元素上粘贴一个类，然后使用CSS定位该类名后代。样本中接下来的几行显示出来。再次，您编写普通HTML，然后在事后修改它，但这次使用<script>组合添加类和<style>来定位它。

所以用JS看这个页面，你会看到一个红色的小时。没有JS，hr就不会出现。

使用JS绘制水平规则

3 个答案: