javascript設置顏色的方法

這篇文章主要介紹了javascript設置顏色的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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設置顏色的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!