简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Questions et réponses frontales > le corps du texte

Comment définir la couleur d'arrière-plan bgcolor de td en javascript

青灯夜游
Libérer： 2022-10-13 16:50:27
original
3047 Les gens l'ont consulté

Étapes de mise en œuvre : 1. Obtenez l'élément td par identifiant, la syntaxe "document.getElementById('id value')" renverra un objet td spécifié ; 2. Utilisez l'attribut backgroundColor de l'objet Style pour définir la couleur d'arrière-plan bgcolor. de l'objet td, la syntaxe "Spécifiez td object.style.backgroundColor="color value"".

Comment définir la couleur d'arrière-plan bgcolor de td en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3. Attribut bgcolor de

td (couleur d'arrière-plan) L'attribut

bgcolor spécifie la couleur d'arrière-plan de la cellule. 

<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>
Copier après la connexion

Comment définir la couleur darrière-plan bgcolor de td en javascript

javascript définit la couleur d'arrière-plan bgcolor de td

En javascript, vous pouvez utiliser la propriété backgroundColor de l'objet Style pour définir la couleur d'arrière-plan.

Étapes d'implémentation :

Étape 1. Obtenez l'élément td via l'id

document.getElementById(&#39;id值&#39;)
Copier après la connexion

Renvoyer l'objet td spécifié

Étape 2 : Utilisez la propriété backgroundColor de l'objet Style pour définir la couleur d'arrière-plan du td spécifié objet

指定td对象.style.backgroundColor="颜色值"
Copier après la connexion

Exemple d'implémentation :

<!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>
Copier après la connexion

Comment définir la couleur darrière-plan bgcolor de td en javascript

Explication : Comment écrire les valeurs de couleur

1. Il n'est pas recommandé d'utiliser noms de couleurs dans les pages Web, en particulier les plus grandes. L'utilisation d'une échelle empêche certains noms de couleurs d'être analysés par les navigateurs ou différents navigateurs interprètent les couleurs différemment.


2. Couleur hexadécimale

Symboles hexadécimaux #RRGGBB et #RGB (tels que #ff0000). "#" suivi de 6 ou 3 caractères hexadécimaux (0-9, A-F).

Il s'agit de la méthode de sélection de couleur la plus couramment utilisée, telle que : 

/*名 称	颜 色	名 称	颜 色	名 称	颜 色
black	纯黑	silver	浅灰	navy	深蓝
blue	浅蓝	green	深绿	lime	浅绿
teal	靛青	aqua	天蓝	maroon	深红
red	大红	purple	深紫	fuchsia	品红
olive	褐黄	yellow	明黄	gray	深灰
white	壳白*/
Copier après la connexion

3, RVB, rouge-vert-bleu (RVB)

Spécifie que la valeur de couleur est la couleur du code RVB, format de fonction Pour rgb(R,G,B), la valeur peut être un entier ou un pourcentage compris entre 0 et 255. 

#f03
#F03
#ff0033
#FF0033
Copier après la connexion
Extension : RGBA, Rouge-Vert-Bleu-Alpha (RGBa)

RGBA étend le mode couleur RVB, qui comprend un canal alpha, permettant de définir la transparence d'une couleur. a représente la transparence : 0=transparent ; 1=opaque. 

rgb(255,0,51)
rgb(255, 0, 51)
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)
Copier après la connexion

4. HSL, teinte-saturation-légèreté (Teinte-saturation-légèreté)

Hue (Teinte) représente un angle de la roue chromatique (c'est-à-dire un anneau représentant un arc-en-ciel).

La saturation et la luminosité sont exprimées en pourcentage. 100 % correspond à une saturation totale, tandis que 0 % correspond à une échelle de gris. 100 % de légèreté est blanche, 0 % de légèreté est noire et 50 % de légèreté est « normale ». 

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)    /* 不透明，即红色 */
Copier après la connexion

Extension : HSLA, Hue-Saturation-Lightness-Alpha (HSLa)

HSLa s'étend du mode couleur HSL, y compris le canal alpha, qui peut spécifier la transparence d'une couleur. a représente la transparence : 0=transparent ; 1=opaque. 

hsl(120,100%,25%)    /* 深绿色 */  
hsl(120,100%,50%)    /* 绿色 */       
hsl(120,100%,75%)    /* 浅绿色 */
Copier après la connexion

5, transparent

Valeur de couleur spéciale, indiquant la couleur transparente. Peut être utilisé directement comme couleur.

【Recommandations associées : Tutoriel vidéo javascript

,

Vidéo de programmation

】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
javascript
source：php.cn
Article précédent：Javascript est-il un sous-ensemble de Java ? Article suivant：Qu'est-ce que la console en javascript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！