Heim > Artikel > Web-Frontend > So legen Sie die bgcolor-Hintergrundfarbe von td in Javascript fest
So legen Sie die bgcolor-Hintergrundfarbe von td in Javascript fest
- 青灯夜游Original
- 2022-10-13 16:50:273050Durchsuche
Implementierungsschritte: 1. Holen Sie sich das td-Element anhand der ID. Die Syntax „document.getElementById('id value')“ gibt ein angegebenes td-Objekt zurück. 2. Verwenden Sie das Attribut „backgroundColor“ des Style-Objekts, um die Hintergrundfarbe „bgcolor“ festzulegen des td-Objekts die Syntax „Specify td object.style.backgroundColor="color value"“.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
tds bgcolor-Attribut (Hintergrundfarbe) Das
bgcolor-Attribut gibt die Hintergrundfarbe der Zelle an.
<table border="1">
<thead>
<tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr>
<thead>
<tbody>
<tr><td bgcolor="#00FF00">刘德华</td> <td>男</td> <td> 56 </td></tr>
<tr><td bgcolor="#FF0000">张学友</td> <td>男</td> <td> 58 </td></tr>
<tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>
<tr><td>黎明</td> <td>男</td> <td> 57 </td></tr>
</tbody>
</table>
Javascript legt die Hintergrundfarbe „bgcolor“ von td fest
In Javascript können Sie die Eigenschaft „backgroundColor“ des Style-Objekts verwenden, um die Hintergrundfarbe festzulegen.
Implementierungsschritte:
Schritt 1. Erhalten Sie das td-Element über die ID
document.getElementById('id值')
Geben Sie das angegebene td-Objekt zurück
Schritt 2: Verwenden Sie die Eigenschaft „backgroundColor“ des Style-Objekts, um die Hintergrundfarbe des angegebenen td festzulegen Objekt
指定td对象.style.backgroundColor="颜色值"
Implementierungsbeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function changeStyle() {
document.getElementById('bg').style.backgroundColor = "#FFCC80";
// document.getElementById('bg').style.backgroundColor="red";
}
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th> 年龄 </th>
</tr>
<thead>
<tbody>
<tr>
<td id="bg">刘德华</td>
<td>男</td>
<td> 56 </td>
</tr>
<tr>
<td>张学友</td>
<td>男</td>
<td> 58 </td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td> 51 </td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td> 57 </td>
</tr>
</tbody>
</table><br>
<input type="button" onclick="changeStyle()" value="改变背景颜色" />
</body>
</html>
Erläuterung: So schreiben Sie Farbwerte
1. Verwenden Sie Farbnamen
Empfohlene Farbnamen
/*名 称 颜 色 名 称 颜 色 名 称 颜 色 black 纯黑 silver 浅灰 navy 深蓝 blue 浅蓝 green 深绿 lime 浅绿 teal 靛青 aqua 天蓝 maroon 深红 red 大红 purple 深紫 fuchsia 品红 olive 褐黄 yellow 明黄 gray 深灰 white 壳白*/
Die Verwendung wird nicht empfohlen Farbnamen in Webseiten, insbesondere in großen Seiten. Durch die Verwendung der Skalierung wird verhindert, dass einige Farbnamen von Browsern analysiert werden oder dass unterschiedliche Browser Farben unterschiedlich interpretieren.
2. Hexadezimale Farbe
Hex-Symbole #RRGGBB und #RGB (z. B. #ff0000). „#“, gefolgt von 6 oder 3 Hexadezimalzeichen (0-9, A-F).
Dies ist die am häufigsten verwendete Farbauswahlmethode, wie zum Beispiel:
#f03 #F03 #ff0033 #FF0033
3, RGB, Rot-Grün-Blau (RGB)
Gibt an, dass der Farbwert die Farbe des RGB-Codes ist, Funktionsformat For rgb(R,G,B), der Wert kann eine Ganzzahl oder ein Prozentsatz von 0-255 sein.
rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%)
Erweiterung: RGBA, Rot-Grün-Blau-Alpha (RGBa)
RGBA erweitert den RGB-Farbmodus, der einen Alphakanal enthält und es ermöglicht, die Transparenz einer Farbe festzulegen. a steht für Transparenz: 0=transparent; 1=undurchsichtig.
rgba(255,0,0,0.1) /* 10% 不透明 */ rgba(255,0,0,0.4) /* 40% 不透明 */ rgba(255,0,0,0.7) /* 70% 不透明 */ rgba(255,0,0, 1) /* 不透明，即红色 */
4. HSL, Farbton-Sättigungs-Helligkeit (Hue-Saturation-Lightness)
Hue (Hue) stellt einen Winkel des Farbkreises dar (d. h. einen Ring, der einen Regenbogen darstellt).
Sättigung und Helligkeit werden in Prozent ausgedrückt.
100 % ist volle Sättigung, während 0 % eine Graustufe ist.
100 % Helligkeit ist weiß, 0 % Helligkeit ist schwarz und 50 % Helligkeit ist „normal“.
hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */
Erweiterung: HSLA, Hue-Saturation-Lightness-Alpha (HSLa)
HSLa erweitert den HSL-Farbmodus, einschließlich des Alpha-Kanals, der die Transparenz einer Farbe festlegen kann. a steht für Transparenz: 0=transparent; 1=undurchsichtig.
hsla(240,100%,50%,0.05) /* 5% 不透明 */ hsla(240,100%,50%, 0.4) /* 40% 不透明 */ hsla(240,100%,50%, 0.7) /* 70% 不透明 */ hsla(240,100%,50%, 1) /* 完全不透明 */
5. transparent
Spezieller Farbwert, der transparente Farbe anzeigt. Kann direkt als Farbe verwendet werden.
【Verwandte Empfehlungen: Javascript-Video-Tutorial, Programmiervideo】
Das obige ist der detaillierte Inhalt vonSo legen Sie die bgcolor-Hintergrundfarbe von td in Javascript fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!