HTML - bgcolor 属性_HTML 菜鸟教程

HTML bgcolor 属性用于表示 body、table、tr、th、td 等元素的背景颜色。

这个属性不再使用，取而代之的是，我们可以使用 CSS background-color 属性。我们可以将此属性与 javascript 一起使用来更改表格或任何其他后续元素的背景颜色。

HTML5不支持HTML 'bgcolor'属性 -

语法

<tag bgcolor = "value"></tag>

其中，value 可以是任何颜色名称、十六进制代码或 RGB 颜色代码。

适用于

下面列出的元素允许使用 HTML bgcolor 属性。

元素	描述
<body>	HTML<body>标签用于定义将在网页上呈现的任何HTML文档的主要内容。
<table>	HTML<table>标签允许我们通过提供行和列功能以有组织的方式排列数据。
<tr>	HTML <tr> 标签用于定义表的行。
<th>	HTML <th> 标签用于定义表的标题行。
<td>	HTML<td>标签用于定义表格行内的单元格。

HTML bgcolor 属性的示例

以下代码演示了 bgcolor 属性的用法

带有 body 标签的 Bgcolor 属性

当我们运行下面的代码时，它将生成一个输出，该输出由网页上显示的应用背景颜色的文本组成。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML bgcolor attribute</title>
</head>
<body bgcolor="red">
	 <h1>Example of HTML 'bgcolor' attribute</h1>
</body>
</html>

表元素的背景颜色

考虑另一种情况，我们将创建一个表并为其定义背景色。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML bgcolor attribute</title>
	 <style>
			table {
				 color: white;
			}
	 </style>
</head>

<body bgcolor='yellow'>
	 <h1>Example of HTML 'bgcolor' attribute</h1>
	 <table bgcolor="green" border='1'>
			<tr>
				 <th>S.No</th>
				 <th>Name</th>
				 <th>Email</th>
			</tr>
			<tr>
				 <td>1.</td>
				 <td>Abc</td>
				 <td>abc123@gmail.com</td>
			</tr>
			<tr>
				 <td>2.</td>
				 <td>Xyz</td>
				 <td>xyz23@gmail.com</td>
			</tr>
	 </table>
</body>

</html>

表格行的背景颜色

让我们看一下以下示例，我们将在其中将 bgcolor 属性与 tr 元素一起使用。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML bgcolor attribute</title>
</head>

<body bgcolor='aqua'>
	 <h1>Example of HTML 'bgcolor' attribute</h1>
	 <p>Fruits and prices: </p>
	 <table bgcolor="white" border='1'>
			<tr bgcolor='aquamarine'>
				 <th>S.No</th>
				 <th>Name</th>
				 <th>Price</th>
			</tr>
			<tr>
				 <td>1.</td>
				 <td>Apple</td>
				 <td>100 R/Kg</td>
			</tr>
			<tr>
				 <td>2.</td>
				 <td>Orange</td>
				 <td>90 R/Kg</td>
			</tr>
			<tr>
				 <td>3.</td>
				 <td>Grapes</td>
				 <td>130 R/Kg</td>
			</tr>
	 </table>
</body>

</html>

动态更改背景颜色

在这个程序中，我们将创建一个按钮，添加 onclick 事件，当用户单击按钮时，该事件会改变背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML bgcolor attribute</title>
</head>
<body bgcolor='aqua'>
	 <h1>Example of HTML 'bgcolor' attribute</h1>
	 <p>Click on the below button to change the background color.</p>
	 <button onclick="Changed()">Changed</button>
	 <script>
			function Changed() {
				 var d = document.querySelector("body")
				 d.bgColor = "yellow";
			}
	 </script>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - autofocus 属性 HTML - border 属性 >>