SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    backgroundColor: IE / Mozilla

    Hi y'all.

    Quick question, how can I convert Mozilla's rendering of the backgroundColor attribute to HEX? right now, when I feed in the background colour of an element into a function (through 'style.backgroundColor'), IE gives it to me in HEX, Mozilla like this: rgb(xxx,xxx,xxx).

    ?

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, you can get the R, G and B values like this...

    var elem = document.getElementById("some_element_id");
    var color = div.style.backgroundColor;
    var rgb = new String(/\d*, \d*, \d*/.exec(color)).split(",");

    ...and then convert the decimals in rgb[0], rgb[1] and rgb[2] to hex values and concatenate them into a string like "#123456"



    Must be some better way to do this...

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    String.prototype.hexTOrgb = function()
    {
    	for ( var hex, i = 0, colors = this.match( /\w\w/g ); ( hex = parseInt( "0x" + colors[i] ) ); i++ )
    		colors[i] = hex;
    	return colors.join(',');
    }
    
    String.prototype.rgbTOhex = function()
    {
    	for ( var rgb, i = 0, colors = this.split(','); ( rgb = colors[i] ); i++ )
    		colors[i] = parseInt( rgb ).toString( 16 ).toUpperCase().leadingZeros( 1, 2 );
    	return "#" + colors.join('');
    }
    
    String.prototype.leadingZeros = function( qty, totalPlaces )
    {
    	var s = this;
    	if ( this.length + qty > totalPlaces ) return s;
    	for ( var i=0; i<qty; i++ )
    		s = "0" + s;
    	return s;
    }
    And, the usage
    Code:
    var mozillaColor = "rgb (0,0,0)";
    var hexColor = mozillaColor.replace( /rgb \((.+?)\)/, "$1" ).rgbTOhex();
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent


    Alternative to leadingZeros() (since we know in this case that no number is > 255):
    colors[i] = (256 + parseInt(rgb)).toString(16).toUpperCase().substr(1, 3);

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aye, always more than one way to skin a cat with JS
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •