javascript設定顏色值的方法：1、使用英文指令顏色，程式碼為【p{color:red;}】；2、使用RGB顏色，程式碼為【p{color:rgb(133,45,200 );}】。
本教學操作環境：windows7系統、javascript1.8.5版，DELL G3電腦。
javascript設定顏色值的方法：
一、網頁中設定顏色值的幾種方法
1、英文指令顏色
p{color:red;}2、RGB顏色
這個與`photoshop` 中的`RGB` 顏色是一致的，由`R(red)`、`G(green)`、 `B(blue)`三種顏色的比例來配色。如：
p{color:rgb(133,45,200);}每一項的值可以是 0~255 之間的整數，也可以是 0%~100% 的百分數。如：`
p{color:rgb(20%,33%,25%);}`RGB的第四個參數是透明度，取值為0-1
3、十六進位顏色
這種顏色設定方法是現在比較普遍使用的方法，其原理其實也是RGB 設置，但是其每一項的值由0-255 變成了十六進制00-ff。如：
p{color:#00ffff;}4、hsla顏色值， 如hsla(360, 50%, 50%, .5) 半透明紅色， 此方式ie8及以下不相容
HSLA(H,S,L,A)
H：Hue (色調)。 0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。值為：0.0% - 100.0%
L：Lightness(亮度)。值為：0.0% - 100.0%
A：Alpha透明度。取值0~1之間。
二、產生隨機顏色代碼
//方法一
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进制颜色
}
三、顏色格式轉換
在編碼過程中，常常會遇到要將顏色格式相互轉換的問題,其中十六進位格式和RGB格式是可以互相轉換的，但是RGBA格式由於多了前兩者沒有的Alpha透明屬性，所以和前兩者轉化會丟失Alpha值，不建議進行轉化，以下是我的顏色轉化的方法：
//十六进制转为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
}
}相關免費學習推薦：javascript視頻教程
以上是javascript如何設定顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！
