Get the background color of textbox

I'm new to Jquery , please pardon my ignorance. I have a page where I set textboxes with different colors on page load, the requirement is to filter on a particular color i.e to display only 1 color on click of particular checkbox.

What I'm trying to do: I'm traversing through the html table row by row, trying to get the current color of each text box, if the color matches keep it else hide the row where the textbox color does not match. I have seen various posts which show how to set the color but not how to retrieve the current color of the textBox, tried on the same lines but no luck, please help.

$('input[id$=cbx]').click(function () {
 var v = document.getElementById("<%=TextBox3.ClientID%>");
 // to get the color value of current text box
 var v2 = v.style.background 
 // below also does not work
 var v2 = v.style.background.val()
 // below also does not work
 var v3= v.css('background-color');
 if (v2 == "green")
  {
   $('[id$=user1]').hide();
  }

Answers 1

  • You can get background color using jQuery as follows

    var bgColor = $('#textbox-id-here').css('background-color');
    

    You will get RGB value. If you want to convert this to hex value, you can use following function

    function rgb2hex(rgb){
     rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
     return (rgb && rgb.length === 4) ? "#" +
      ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
      ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
      ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
    }
    

    EDIT

    Assume you have table to hold your textboxes. then you can do something like this

    $('#table-id tr td input[type=text]').each(function(){
      var bg = rgb2hex($(this).css('background-color'));
      if(bg==='#ff0000'){
        $(this).hide();
      }
    });
    

Related Articles