Каков цвет по умолчанию для <hr> ?

Google не повезло, а также существующие hr цвета вопросы, в результате чего, как изменить цвет hr

Я хочу создать border с тем же цветом, что и цвет по умолчанию <hr>, но я не знаю, какой именно цвет.

Кто-нибудь знает?

ps - Я знаю, как изменить цвет hr-тега. Я хочу узнать, что это, прежде чем я его изменю

Ответы

Ответ 1

Цвет горизонтальной линейки зависит от браузера, но вы можете получить цвет элемента hr следующим образом:

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

Обратите внимание, однако, что border-style это вставка, поэтому цвет, который вы получаете, может отличаться от "реального" значения, которое вы видите на экране. Вы либо хотите:

  • дайте вашей границе тот же пограничный стиль, что и hr
  • установите пограничный стиль элемента hr на solid как я сделал в демо, чтобы получить "реальный" цвет
  • получить пограничный стиль hr -element и соответствующим образом адаптировать ваш цвет (может быть сложно и зависит от браузера для вычисления)

См. Демонстрацию, демонстрирующую получение соответствующего цвета.

Ответ 2

Цвет зависит от браузера/реализации, поэтому знание цвета невозможно.

Вместо этого вы можете определить цвет элемента <hr> как вам нравится, используя CSS:

hr {
    color: red;
}

Теперь вы знаете, что цвет красный!

Обновление. Похоже, что в зависимости от браузера нужно использовать color или background-color (см. Комментарии). Кажется разумным использовать оба в CSS:

hr {
    color: red;
    background-color: red;
}

Ответ 3

w3 не определяет цвет по умолчанию для элемента hr (http://www.w3.org/TR/CSS21/sample.html), html5 таблица стилей по умолчанию еще не подтверждена афайком, но не должна изменять этот факт.

В результате каждый браузер может использовать свои собственные значения по умолчанию.

Ответ 4

AFAIK это зависит от ОС (или даже устройства), поэтому нет такой вещи, как "цвет HR по умолчанию".

Ответ 5

Обратите внимание, что некоторые браузеры не отображают <hr> как одноцветную линию.

Здесь увеличенный снимок экрана левого конца <hr> в Chrome 24 на Windows на белом фоне:

enter image description here

Таким образом, у вас есть два цвета на выбор.

Ответ 6

Используйте color и background-color

<hr />

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

Рабочий скрипт: http://jsfiddle.net/D2UaZ/1/

Ответ 7

Цвет по умолчанию hr - черный цвет

Ответ 8

Это #eee в Internet Explorer 11.

Ответ 9

Я не уверен, что точный цвет тега hr, но код CSS ниже изменит цвет на выбранный вами цвет.

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }