• 技术文章 >web前端 >js教程

    javascript怎么设置背景颜色

    青灯夜游青灯夜游2021-07-20 14:57:40原创103

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

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

    javascript怎么设置背景颜色

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

    语法:

    Object.style.backgroundColor="颜色值"

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<style type="text/css">
    			body {
    				background-color: #B8BFD8;
    			}
    		</style>
    		<script type="text/javascript">
    			function changeStyle() {
    				document.body.style.backgroundColor = "#FFCC80";
    				// document.body.style.backgroundColor="red";
    			}
    		</script>
    	</head>
    	<body>
    
    		<input type="button" onclick="changeStyle()" value="改变背景颜色" />
    
    	</body>
    </html>

    效果图:

    1.gif

    说明:颜色值的写法:

    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怎么设置背景颜色的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 背景颜色
    上一篇:Javascript如何使网页跳转 下一篇:javascript怎么将值转换成数字类型
    VIP会员

    相关文章推荐

    • 原生javascript是什么意思• javascript怎么将字符串转为boolean类型• javascript中字母如何转为数字• JavaScript怎么改变鼠标指针样式• JavaScript怎么判断正数还是负数• javascript时间戳如何转化为日期• javascript如何删除键值对

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网