So legen Sie die bgcolor-Hintergrundfarbe von td in Javascript fest-Front-End-Fragen und Antworten-php.cn

So legen Sie die bgcolor-Hintergrundfarbe von td in Javascript fest

青灯夜游

Freigeben： 2022-10-13 16:50:27

Original

3047 Leute haben es durchsucht

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"“.

So legen Sie die bgcolor-Hintergrundfarbe von td in Javascript fest

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>

Nach dem Login kopieren

So legen Sie die bgcolor-Hintergrundfarbe von td in Javascript fest

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(&#39;id值&#39;)

Nach dem Login kopieren

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="颜色值"

Nach dem Login kopieren

Implementierungsbeispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script>
			function changeStyle() {
				document.getElementById(&#39;bg&#39;).style.backgroundColor = "#FFCC80";
				// document.getElementById(&#39;bg&#39;).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>

Nach dem Login kopieren

So legen Sie die bgcolor-Hintergrundfarbe von td in Javascript fest

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	壳白*/

Nach dem Login kopieren

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

Nach dem Login kopieren

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%)

Nach dem Login kopieren

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)    /* 不透明，即红色 */

Nach dem Login kopieren

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%)    /* 浅绿色 */

Nach dem Login kopieren

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)   /* 完全不透明 */

Nach dem Login kopieren

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!