HTML - bgcolor 属性

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

此属性不再使用，建议使用 CSS 的 `background-color` 属性。可以使用 JavaScript 与此属性结合来更改表格或其他元素的背景颜色。

HTML ‘bgcolor’ 属性在 HTML5 中不受支持。

语法

<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>[email protected]</td>
      </tr>
      <tr>
         <td>2.</td>
         <td>Xyz</td>
         <td>[email protected]</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>

支持的浏览器

属性
bgcolor	是	是	是	是	是

html_attributes_reference.htm

打印页面