通过 javascript 将 CSS 样式添加到特定的 class

Question

I got these lines of code and want to add them only to a specific div class. So if the background is dark it should be filter: invert(1); and when the background is brighter filter: invert(0); . How can I do that? Hope you can help me...I'm still at the very beginning of understanding js.

    function isDark( color ) {
    var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
    return ( match[1] & 255 )
         + ( match[2] & 255 )
         + ( match[3] & 255 )
           < 3 * 256 / 2;
}

$('div').each(function() {console.log($(this).css("background-color"))
    $(this).css("filter", isDark($(this).css("background-color")) ? 'invert(1)' : 'invert(0)');
});

Answer 1

You can check the condition separately in an if else statement as below.

$('div').each(function() {
  var color = $(this).css("background-color");
  if (isDark(color)) {
    $(this).css("filter", 'invert(1)');
  } else {
    $(this).css("filter", 'invert(0)');
  }
});

OR

if you want a css class to be added, you can do it as below

$('div').each(function() {
  var color = $(this).css("background-color");
  if (isDark(color)) {
    $(this).addClass("inverted");
  } else {
    $(this).addClass("not-inverted");
  }
});

in which the styles can be added for the new class in your CSS as below.

.inverted {
  filter: invert(1);
}

.not-inverted {
  filter: invert(0);
}

See the snippet below.

 function isDark(color) { var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color); return (match[1] & 255) + (match[2] & 255) + (match[3] & 255) < 3 * 256 / 2; } /* $('div').each(function() {console.log($(this).css("background-color")) $(this).css("filter", isDark($(this).css("background-color"))? 'invert(1)': 'invert(0)'); }); */ $('div').each(function() { var color = $(this).css("background-color"); if (isDark(color)) { $(".logo").css("filter", 'invert(1)'); } else { $(".logo").css("filter", 'invert(0)'); } });

 body { height: 400vh; }.logo { position: fixed; top: 40px; right: 20px; background-image: url(https://image.freepik.com/free-vector/bicycle-shop-logo-design-vector_53876-40626.jpg); background-repeat: no-repeat; background-size: 100px; height: 100px; width: 100px; background-color: black; }.blabla { background-color: black; height: 50vh; }.blablabla { background-color: grey; height: 50vh; }.blablablabla { background-color: red; height: 50vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="logo"></div> <div class="blabla">test</div> <div class="blablabla">test</div> <div class="blablablabla">test</div>