javascript - のデフォルトの色は何ですか
?

Question

Googleは運が悪く、既存の色の質問もあり、色hrを変更する方法がわかりましたhr

borderデフォルトの色と同じ色でを作成したいのです<hr>が、正確な色がわかりません。

誰でも知っていますか？

追伸 - hr タグの色を変更する方法を知っています。変更する前にそれが何であるかを知りたいです。

score 11 · Accepted Answer

水平ルーラーの色はブラウザによって異なりますが、hr次のようにして要素の色を取得できます。

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

ただし、多くの場合、border-styleは差し込まれているため、表示される色は画面に表示される「実際の」値とは異なる場合があることに注意してください。次のいずれかを行います。

適切な色を取得するデモをご覧ください。

score 3 · Accepted Answer

色はブラウザ/実装に依存するため、色を知ることはできません。

<hr>代わりに、 CSS を使用して好きなように要素の色を定義できます。

hr {
    color: red;
}

これで色が赤だということがわかりました！

更新:ブラウザによっては、coloror background-color(コメントを参照) を使用する必要があるようです。CSS で両方を使用するのが賢明なようです。

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

score 3 · Accepted Answer

w3 は hr 要素のデフォルトの色を定義していません ( http://www.w3.org/TR/CSS21/sample.html )。html5 のデフォルトのスタイルシートはまだ確認されていませんが、この事実を変更するべきではありません。

その結果、各ブラウザは独自のデフォルトを自由に適用できます。

score 1 · Accepted Answer

私の知る限り、OS (またはデバイス) に依存するため、「デフォルトの HR カラー」というものはありません。

score 1 · Accepted Answer

<hr>一部のブラウザでは、 s が単色の線としてレンダリングされないことに注意してください。

<hr>これは、Windows 上の Chrome 24のの左端を白い背景で拡大したスクリーンショットです。

ここに画像の説明を入力

そこで、2色からお選びいただけます。

score 0 · Accepted Answer

colorと_background-color

<hr />

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

score -1 · Accepted Answer

hr タグの正確な色はわかりませんが、以下の CSS コードは色を選択した色に変更します。

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

javascript - のデフォルトの色は何ですか?