How to set color in javascript

How to set the color value in javascript: 1. Use the English command color, the code is [p{color:red;}]; 2. Use the RGB color, the code is [p{color:rgb(133,45,200 );}].

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.

How to set color values in javascript:

1. Several methods of setting color values in web pages

1. English command color

p{color:red;}

2. RGB color

This is consistent with the `RGB` color in `photoshop`, consisting of `R(red)`, `G(green)`, `B(blue)` uses the ratio of the three colors to match the color. For example:

p{color:rgb(133,45,200);}

The value of each item can be an integer between 0 and 255, or a percentage between 0% and 100%. For example: `

p{color:rgb(20%,33%,25%);}

`The fourth parameter of RGB is transparency, the value is 0-1

3, hexadecimal color

This color setting method It is a more commonly used method now. Its principle is actually RGB setting, but the value of each item is changed from 0-255 to hexadecimal 00-ff. Such as:

p{color:#00ffff;}

4, hsla color value, such as hsla (360, 50%, 50%, .5) translucent red, this method is not compatible with ie8 and below

HSLA(H,S,L,A)

H: Hue (tone). 0 (or 360) represents red, 120 represents green, 240 represents blue, and other values can also be used to specify colors. The value is: 0 - 360

S: Saturation. The value is: 0.0% - 100.0%

L: Lightness. The value is: 0.0% - 100.0%

A: Alpha transparency. The value is between 0~1.

2. Generate random color codes

//方法一 function RandomColor1(){ return '#'+Math.floor(Math.random()*255).toString(10) } //方法二 function RandomColor2(){ return '#'+Math.floor(Math.random()*0xffffff).toString(16) } //方法三 //使用RGB来表示，并使用es6语法 //使用RGB的好处，一是代码少，简单好实现；二是可以支持透明度，透明度也可以支持随机颜色。 function RandomColor3 () { const r = Math.round(Math.random()*255); const g = Math.round(Math.random()*255); const b = Math.round(Math.random()*255); const a = ( (Math.random()*5 + 5) / 10 ).toFixed(2) //随机颜色返回的是一个0.5到1 的两位小数;如果生成的0-1就直接是const a =Math.random() const color = `rgba(${r},${g},${b},${a})` console.log(color) return color } //方法四 function RandomColor4 (){ //随机一个32的4次幂然后取整，这个值接近fffff的十进制 var random=parseInt(Math.random()*Math.pow(32,4)); //random返回一个位数不确定的整数，然后toString(16)转化成16进制， //如果这个随机数位数不够四位的话前边拼接5个0，最后截取后四位 var v=('00000'+random.toString(16)).substr(-4); return v } //方法五 function RandomHColor5() { //随机生成十六进制颜色 var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数 while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位 hex = '0' + hex; } return '#' + hex; //返回‘#'开头16进制颜色 }

3. Color format conversion

In encoding During the process, we often encounter the problem of converting color formats to each other. The hexadecimal format and the RGB format can be converted to each other. However, the RGBA format has the Alpha transparency attribute that the first two do not have, so it is different from the first two. The alpha value will be lost when converting, so conversion is not recommended. Here is my color conversion method:

//十六进制转为RGB function hex2Rgb(hex) { var rgb = []; // 定义rgb数组 if (/^\#[0-9A-F]{3}$/i.test(hex)) { //判断传入是否为#三位十六进制数 let sixHex = '#'; hex.replace(/[0-9A-F]/ig, function(kw) { sixHex += kw + kw; //把三位16进制数转化为六位 }); hex = sixHex; //保存回hex } if (/^#[0-9A-F]{6}$/i.test(hex)) { //判断传入是否为#六位十六进制数 hex.replace(/[0-9A-F]{2}/ig, function(kw) { rgb.push(eval('0x' + kw)); //十六进制转化为十进制并存如数组 }); return `rgb(${rgb.join(',')})`; //输出RGB格式颜色 } else { console.log(`Input ${hex} is wrong!`); return 'rgb(0,0,0)'; } } //RGB转为十六进制 function rgb2Hex(rgb) { if (/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) { //test RGB var hex = '#'; //定义十六进制颜色变量 rgb.replace(/\d{1,3}/g, function(kw) { //提取rgb数字 kw = parseInt(kw).toString(16); //转为十六进制 kw = kw.length < 2 ? 0 + kw : kw; //判断位数，保证两位 hex += kw; //拼接 }); return hex; //返回十六进制 } else { console.log(`Input ${rgb} is wrong!`); return '#000'; //输入格式错误,返回#000 } }

Related free learning recommendations:javascript video Tutorial

The above is the detailed content of How to set color in javascript. For more information, please follow other related articles on the PHP Chinese website!