HTML DOM 样式 color 属性

htmlweb developmentfront end technology更新于 2024/3/13 16:12:17

HTML DOM 样式 color 属性用于获取或设置文本的颜色。文本的颜色可以用十六进制、rgb()、rgba()、hsl()、hsla() 或已知关键字指定。

以下是语法 −

设置 color 属性 −

object.style.color = "color|initial|inherit"

以上属性解释如下 −

值	描述
Color	用于指定文本的颜色值。
Initial	用于将此属性设置为初始值。
Inherit	用于继承父属性值

让我们看一个关于 color 属性的示例 −

示例

<!DOCTYPE html>
<html>
<body>
<h1>Color property example</h1>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>
<p>This is paragraph 5</p>
<p>Change the above paragraphs color by clicking the below button</p>
<button type="button" onclick="ChangeColor()">Change Text Color</button>
<script>
   function ChangeColor() {
      for(var i=0;i<5;i++){
         if(i%2==0)
            document.getElementsByTagName("P")[i].style.color="blue";
         else
            document.getElementsByTagName("P")[i].style.color="red";
      }
   }
</script>
</body>
</html>