14

谷歌运气不好，也存在hr颜色问题，导致如何改变hr颜色

我想创建一个border与默认颜色相同的<hr>颜色，但我不知道它到底是什么颜色。

有谁知道？

ps - 我知道如何更改 hr 标签的颜色.. 我想在更改之前找出它是什么

4

9 回答 9

11

水平标尺的颜色取决于浏览器，但您可以hr像下面这样获取元素的颜色：

el = document.querySelector("hr");
color = window.getComputedStyle(el).getPropertyValue("border-top-color");
console.log(color);

但是请注意，通常border-style是插图，因此您获得的颜色可能与您在屏幕上看到的“真实”值不同。您要么想要：

  • 给你的边框与hr
  • 将hr元素的边框样式设置为solid我在演示中所做的那样以获得“真实”颜色
  • 获取hr-element 的边框样式并相应地调整您的颜色（可能很棘手并且取决于浏览器的计算）

查看演示获取相应颜色的演示。

于 2013-02-22T14:50:29.750 回答
3

颜色取决于浏览器/实现，因此不可能知道颜色。

相反，您可以<hr>使用 CSS 定义元素的颜色：

hr {
    color: red;
}

现在你知道颜色是红色的了！

更新：似乎取决于浏览器需要使用color或background-color（见评论）。在你的 CSS 中同时使用这两者似乎是明智的：

hr {
    color: red;
    background-color: red;
}
于 2013-02-22T14:37:14.347 回答
3

w3 没有为 hr 元素（http://www.w3.org/TR/CSS21/sample.html）定义默认颜色，html5 默认样式表尚未确认 afaik 但不应改变这一事实。

因此，每个浏览器都可以自由应用自己的默认设置。

于 2013-02-22T14:45:41.090 回答
1

AFAIK 它依赖于操作系统（甚至设备）——所以没有“默认 HR 颜色”之类的东西。

于 2013-02-22T14:36:18.517 回答
1

请注意，某些浏览器不会将<hr>s 呈现为单色线。

<hr>这是Windows 上 Chrome 24左端的放大屏幕截图，背景为白色：

在此处输入图像描述

所以你有两种颜色可供选择。

于 2013-02-22T14:55:26.443 回答
0

同时使用color和background-color

<hr />

hr {
    color: #f00;
    background-color: #f00;  
}

工作小提琴：http: //jsfiddle.net/D2UaZ/1/

于 2013-02-22T14:48:33.027 回答
0

hr的默认颜色是黑色

于 2014-06-30T10:59:31.517 回答
0

它是Internet Explorer 11 上的#eee 。

于 2017-08-31T19:13:22.853 回答
-1

我不确定 hr 标签的确切颜色，但下面的 CSS 代码会将颜色更改为您选择的颜色。

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }
于 2013-02-22T14:42:31.363 回答