How to Find Element Has Specific Color Using Jquery

JQuery Find Elements By Background-Color

Try the .filter method.

var rows = $('tr').filter(function(){
    var color = $(this).css("background-color");
    return color === "#FF6600" || color === "rgb(255, 102, 0)" ;
});

I haven't tested it, the rgb part may need to be adjusted to account for spacing.

Edit:

or better yet, this takes into account uppercase vs lowercase

var rows = $('tr').filter(function(){
    var color = $(this).css("background-color").toLowerCase();
    return color === "#ff6600" || color === "rgb(255, 102, 0)" ;
});

How to find element has specific color using jquery

You can use .filter();

 $('ul li').filter(function() {   return $(this).css('color') == 'rgb(255, 0, 0)'; }).each(function() {   $(this).css('background-color', 'yellow'); })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script><ul id="components">  <li style="color:red">Computer</li>  <li style="color:blue">Mouse</li>  <li style="color:red">Keyboard</li>  <li style="color:red">Printer</li>  <li style="color:green">CPU</li></ul>

How to find a class with certain background color in jquery?

Try this its working
you can check here https://jsfiddle.net/surendra786/dt3r7x97/
you have mistaken in background spelling 'bacground' and also give the spaces b/w color code like this rgb(255, 255, 255)

$(".common").each(function(){
 if($(this).css("background-color") == "rgb(255, 255, 255)"){
  alert ('this')
}

});

plz up if its working

Use jQuery to find div by background color

If you use this in more than one location frequently you could also consider writing your own custom selector (http://answers.oreilly.com/topic/1055-creating-a-custom-filter-selector-with-jquery/)

jQuery.expr[':'].greenbg = function(elem) {
        return jQuery(elem).css('background-color') === 'green';
};

Then you would simply do $('div:visible:greenbg').stuffs()

Find a div by color

This is how you get the color value of an element by it's computed style:

$(selector).css('color');

But, the above would return the RGB value even though the color is set as hex value. Hence, you'd need a function to convert RGB to hex.

So, the bottom line is, filter the div elements to return the one that matches the color specified, store it in a variable, then do whatever with that variable, such as, get the containing text etc. Take a look at the example below.

Only tested on major browsers and IE9+

var matchedDiv = $("div").filter(function() {    return rgb2hex($(this).css("color")) === "#ff8533"});
alert (matchedDiv.css('border', '1px solid black').text());
//Credit: http://stackoverflow.com/a/3971432/572827function rgb2hex(rgb) {    rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);    function hex(x) {        return ("0" + parseInt(x).toString(16)).slice(-2);    }    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div style="color: red;">Demo2</div><div class="demo" style="color: #ff8533;">The one I am after</div><div style="color: green;">Demo3</div>

Examining Multiple Elements to Determine Their Color Using JQuery

Instead of mixing jQuery and Vanilla JS, I coded everything in jQuery.

The main issue is that .rows is an array of divs - i.e.

var rows = $("div.row")

So, you need to iterate through each element in the array to determine its value and change its bg-color according to the data-time attribute.

See demo below

// getting current hours from timestamp;var date = new Date();var time = date.getHours();
// once document is loaded and ready$(document).ready(function() {  var rows = $("div.row")
  // rows is an array of divs, let's work with each element one by one   $.each(rows, function(idx, row) {    //remove previous classes assigned to it (this may not be necessary)    $(row).removeClass("past");    $(row).removeClass("present");    $(row).removeClass("future");
    // Read the value of the data-time attribute & turn it into a number    var dataAttString = $(row).data('time');    var dataAttNum = Number(dataAttString);
    // assign a CSS class according to the current hour (calculated at the beginning)    if (dataAttNum < time) {      $(row).addClass("past");    } else if (dataAttNum === time) {      $(row).addClass("present");    } else if (dataAttNum > time) {      $(row).addClass("future");    }  });});

/* CSS Classes */.past {  background-color: lightgray;}
.present {  background-color: lightgreen;}
.future {  background-color: lightblue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="row" data-time="0000">  <div class="col-md-3">    <p>0001</p>  </div>  <div class="col-md-6">    <textarea class="event-field"></textarea>  </div>
  <div class="col-md-3"><button type="submit" class="btn btn-primary">lt;/button></div>
  <div class="row" data-time="12">    <div class="col-md-3">      <p>0900</p>    </div>    <div class="col-md-6">      <textarea class="event-field"></textarea>    </div>    <div class="col-md-3"><button type="submit" class="btn btn-primary">lt;/button></div>  </div>

jQuery Get Elements Color?

Use the .css() method on the element you want to retrieve.

In your example:

var theColorIs = $('a').css("color");

Which will return the color in RGB.

How to check the background-color of an element using jquery

it works like this

if ($("#notify-9").css('background-color')=="rgb(220, 20, 60)") alert("matched");

you need to convert name to red, green, blue components, you might use this tool

http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php

Selecting elements with a certain background color

if i understand the question correctly, the selector [attribute=value] will not work because <span> does not contain an attribute "background-color". you can test that out quickly to confirm it won't match anything:

$('#someDiv span[background-color]').size(); // returns 0

given:

.one, .two {
  background-color: black;
}

.three {
  background-color: red;
}

here's a snippet that will work:

$('div#someDiv span').filter(function() {    var match = 'rgb(0, 0, 0)'; // match background-color: black    /*        true = keep this element in our wrapped set        false = remove this element from our wrapped set                                                         */    return ( $(this).css('background-color') == match );
}).css('background-color', 'green'); // change background color of all black spans

.one, .two {  background-color: black;}
.three {  background-color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="someDiv">    <span class="one">test one</span>    <span class="two">test two</span>    <span class="three">test three</span></div>

How to find all rows with background-color yellow using jquery?

The clean approach would be to use a class instead of inline styles.

$("#btnSearch").click(function() {
  console.log($('#tbl1 tr.yellow'))})

.yellow {  background-color: rgb(255, 255, 0);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table id='tbl1' class="table table-hover table-bordered">  <thead>    <tr>      <th>#</th>      <th>Ime izdelka</th>      <th>Opisni REF</th>      <th>LOT/serijska/EDI</th>      <th>Stanje (REF)</th>      <th>Stanje (LOT)</th>      <th>Privzeta skupina</th>    </tr>  </thead>  <tfoot>
  </tfoot>  <tbody>    <tr class="yellow">      <td data-id="iROW_NUMBER" style="background-color: rgb(255, 255, 0);">1</td>      <td data-id="cPROD_NME" style="background-color: rgb(255, 255, 0);">Kortikalni 2.0/14mm (zlati)</td>      <td data-id="cPROD_DCD" style="background-color: rgb(255, 255, 0);">401.364</td>      <td data-id="cPRSE_DCD" style="background-color: rgb(255, 255, 0);">8036572</td>      <td data-id="iPROD_QUA_QUA" style="background-color: rgb(255, 255, 0);">6</td>      <td data-id="cPRSS_QUA_QUA" style="background-color: rgb(255, 255, 0);">3</td>      <td data-id="cPRGR_NME" style="background-color: rgb(255, 255, 0);">Stopalo - SYNTHES</td>    </tr>    <tr class="yellow">      <td data-id="iROW_NUMBER" style="background-color: rgb(255, 255, 0);">2</td>      <td data-id="cPROD_NME" style="background-color: rgb(255, 255, 0);">Kortikalni 2.0/14mm (zlati)</td>      <td data-id="cPROD_DCD" style="background-color: rgb(255, 255, 0);">401.364</td>      <td data-id="cPRSE_DCD" style="background-color: rgb(255, 255, 0);">8327937</td>      <td data-id="iPROD_QUA_QUA" style="background-color: rgb(255, 255, 0);">6</td>      <td data-id="cPRSS_QUA_QUA" style="background-color: rgb(255, 255, 0);">1</td>      <td data-id="cPRGR_NME" style="background-color: rgb(255, 255, 0);">Stopalo - SYNTHES</td>    </tr>    <tr>      <td data-id="iROW_NUMBER">3</td>      <td data-id="cPROD_NME">Kortikalni 2.0/14mm (zlati)</td>      <td data-id="cPROD_DCD">401.364</td>      <td data-id="cPRSE_DCD">9572333</td>      <td data-id="iPROD_QUA_QUA">6</td>      <td data-id="cPRSS_QUA_QUA">2</td>      <td data-id="cPRGR_NME">Stopalo - SYNTHES</td>    </tr>  </tbody></table>
<br/><br/><button id="btnSearch">Search</button>