javascript如何设置背景颜色

这篇文章主要讲解了“javascript如何设置背景颜色”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript如何设置背景颜色”吧！

成都创新互联是一家集网站建设,本溪企业网站建设,本溪品牌网站建设,网站定制,本溪网站建设报价,网络营销,网络优化,本溪网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

在javascript中，可以利用Style对象的backgroundColor属性来设置背景颜色，该属性用于设置元素的背景颜色，语法格式“元素对象.style.backgroundColor="颜色值";”。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

javascript怎么设置背景颜色

在javascript中，可以利用Style对象的backgroundColor属性来设置背景颜色。

语法：

Object.style.backgroundColor="颜色值"

示例：

	
		
			body {
				background-color: #B8BFD8;
			}
		
		
			function changeStyle() {
				document.body.style.backgroundColor = "#FFCC80";
				// document.body.style.backgroundColor="red";
			}
		
	
	

		

	

效果图：

说明：颜色值的写法：

1、使用颜色名

规范推荐的颜色名称

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

不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色的解释差异。

2、十六进制颜色

十六进制符号 #RRGGBB 和 #RGB（比如 #ff0000）。"#" 后跟 6 位或者 3 位十六进制字符（0-9, A-F）。

这是最常用的取色方法，例如：

#f03
#F03
#ff0033
#FF0033

3、RGB，红-绿-蓝（red-green-blue (RGB)）

规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，取值可以是 0-255 的整数或百分比。

rgb(255,0,51)
rgb(255, 0, 51)
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)

扩展：RGBA，红-绿-蓝-阿尔法（RGBa）

RGBA 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。a 表示透明度：0=透明；1=不透明。

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

4、HSL，色相-饱和度-明度（Hue-saturation-lightness）

色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。
饱和度和明度由百分数来表示。
100% 是满饱和度，而 0% 是一种灰度。
100% 明度是白色， 0% 明度是黑色，而 50% 明度是"一般的"。

hsl(120,100%,25%)    /* 深绿色 */  
hsl(120,100%,50%)    /* 绿色 */       
hsl(120,100%,75%)    /* 浅绿色 */

扩展：HSLA，色相-饱和度-明度-阿尔法（HSLa）

HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色的透明度。 a 表示透明度：0=透明；1=不透明。

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

5、transparent

特殊颜色值，表示透明色。可以直接当做颜色使用。

感谢各位的阅读，以上就是“javascript如何设置背景颜色”的内容了，经过本文的学习后，相信大家对javascript如何设置背景颜色这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！