2016/10/18

[jQuery][css]rgbを16進数に変換

jQueryでstyleメソッドを使ってcolorプロパティーを取得すると、rgbで返ってくるので、
これを16進数にしたい場合を調査しました。

jQueryでrgb(255,255,255)を#FFFFFF形式に変換
によると、

jQuery(function(){
    $(".color").click(function(){
        $(".color").css({"borderColor":"#CCC"});
        $(this).css({"borderColor":"blue"});

        //クリックされた要素の背景色取得
        var bgColor = $(this).css("backgroundColor").toString();
        //背景色の余計な文字列削除
        bgColor = bgColor.replace("rgb(","");
        bgColor = bgColor.replace(")","");
        //文字列分割
        bgColor = bgColor.split(",");
        //10進数を16進数に変換して連結
        bgColor = "#"+parseInt(bgColor[0]).toString(16)+parseInt(bgColor[1]).toString(16)+parseInt(bgColor[2]).toString(16);
        //inputに値を設定
        $(this).nextAll("input[type=hidden]").val(bgColor);
    });
});
と記載されているが、実際、10より小さい数字に場合、違う値が返ってしまうと思っていたところ、何人かの人がコメントで突っ込みをしていた。
var bgColor = $(this).css("backgroundColor").toString().match(/\d+/g);
bgColor = "#"+bgColor.map(function(t){return ("0"+(t|0).toString(16)).substr(-2)}).join("");

0 コメント:

コメントを投稿