Um die Hintergrundfarbe und Schriftfarbe der Webseite zu erhalten, lautet die Methode wie folgt:
Gedanken: Was es wert ist, das Farbattribut zu erhalten, ist die RGB -Farbe, die nicht das ist, was wir wollen. Deshalb müssen wir die RGB -Farbe in die hexadezimale Farbe ändern und zuerst die RGB -Farbe erhalten:
Die Codekopie lautet wie folgt:
var rgb = document.getElementById ('color'). style.backgroundColor;
Das Format wird wie folgt erhalten: RGB (225, 22, 23);
Die Codekopie lautet wie folgt:
var rgb = rgb.split ('(') [1]; // Array mit Länge 2 nach der Aufteilung
Teilen Sie dann die String (225, 22, 23) auf (Hinweis: Nur der Zahlentyp kann konvertiert werden. Verwenden Sie also ParseinT, um den Typ zu wirken!):
Die Codekopie lautet wie folgt:
für (var k = 0; k <3; k ++) {
STR [k] = ParseInt (rgb .Split (',') [k]). ToString (16); // strarray speichert Spaltdaten
}
Die endgültige Kombination:
Die Codekopie lautet wie folgt:
str = '#'+str [0]+str [1]+str [2];
Der gesamte Code ist wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title> Gethexcolor JS/JQuery Get Hex Color </title>
<meta charset = "utf-8" />
<script type = "text/javaScript">
Funktion GethexbgColor () {
var str = [];
var rgb = document.getElementById ('color'). style.backgroundcolor.split ('(');
für (var k = 0; k <3; k ++) {
Str [k] = ParseInt (RGB [1] .Split (',') [k]). Tostring (16);
}
str = '#'+str [0]+str [1]+str [2];
document.getElementById ('color'). innerhtml = str;
}
Funktion Gethexcolor () {
var str = [];
var rgb = document.getElementById ('color'). style.color.split ('(');
für (var k = 0; k <3; k ++) {
Str [k] = ParseInt (RGB [1] .Split (',') [k]). Tostring (16);
}
str = '#'+str [0]+str [1]+str [2];
document.getElementById ('color'). innerhtml = str;
}
</script>
<style type = "text/css">
#Farbe{
Breite: 200px;
Höhe: 200px;
Zeilenhöhe: 200px;
Text-Align: Mitte;
}
</style>
</head>
<body>
<div style = "color: #88ee22; Hintergrundfarbe: #EF8989;" id = "color"> </div>
<Eingabe onclick = "GethexbgColor ();" Typ = "Button" Value = "GetBackground Color" />
<Eingabe onclick = "Gethexcolor ();" type = "button" value = "Schriftfarbe erhalten" />
</body>
</html>