background-colorをhexに変換

jQueryで、背景色を取得するコード

view plainprint?

1. $( this ).css( "background-color" );  

$( this ).css( "background-color" );

は、ブラウザによりRGBか、HEXで返ってくる。
参考:jQueryで色名を取得する際の注意


ここ(英語)を参考にして、
返ってくる文字列が以下のどのフォーマットでも
"#0046FF"のような文字列を作成するコード

• rgb(0,70,255)
• rgb(0, 70, 255)
• #0046ff





view plainprint?

1. var hexString = $( this ).css( "background-color" );   
2.   
3. var parts = hexString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);  
4. // ここでRGBフォーマットの場合は、  
5. // ["rgb(0, 70, 255", "0", "70", "255"]のようになります。  
6.   
7. if ( parts != null && parts.length == 4 )  
8. {  
9.     // HEXフォーマットなら、ここには入ってきません。  
10.     delete ( parts[ 0 ] );  
11.     for ( var i = 1 ; i <= 3 ; ++i )  
12.     {  
13.         parts[ i ] = parseInt(parts[ i ]).toString(16);  
14.         if ( parts[ i ].length == 1 )  
15.         {  
16.             parts[ i ] = '0' + parts[ i ];  
17.         }  
18.     }  
19.     hexString = "#" + parts.join( "" );  
20. }  

var hexString = $( this ).css( "background-color" ); 

var parts = hexString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
// ここでRGBフォーマットの場合は、
// ["rgb(0, 70, 255", "0", "70", "255"]のようになります。

if ( parts != null && parts.length == 4 )
{
    // HEXフォーマットなら、ここには入ってきません。
    delete ( parts[ 0 ] );
    for ( var i = 1 ; i <= 3 ; ++i )
    {
        parts[ i ] = parseInt(parts[ i ]).toString(16);
        if ( parts[ i ].length == 1 )
        {
            parts[ i ] = '0' + parts[ i ];
        }
    }
    hexString = "#" + parts.join( "" );
}

Posted in: jQuery