How to Change the Color of <Div> Element Depending on Its Height or Width

How to change the color of div Element depending on its height or width?

Here is a trick with gradient background where you can rely on background-size and repeat. The idea is to eiher have a negative value of size (no coloration) or positive value and with the repeat you will have a full coloration.

Here is an example where I am defining 3 ranges: from 0 to 100px (orange), from 100px to 200px (blue), bigger than 200px (red).

I am setting the height manually but it can be set automatically by the content:

.box {  min-height:50px;  margin:10px;  border:1px solid;  background:    linear-gradient(red,red)   left/100% calc(100% - 200px),    linear-gradient(blue,blue) left/100% calc(100% - 100px),    orange;}

<div class="box"></div>
<div class="box" style="height:120px"></div>
<div class="box" style="height:220px"></div>

Change DIV Background Color, Depending on Its Width

I'd suggest:

$('.rating-bar').css('background-color', function(){
    var percentage = parseInt($(this).data('size'), 10);
    if (percentage > 0 && percentage < 25){
        return '#a41818'
    }
    else if (percentage > 24 && percentage < 50) {
        return '#87581c';
    }
    else if (percentage > 49 && percentage < 75) {
        return '#997815';
    }
    else if (percentage > 74 && percentage < 90) {
        return '#7ba01c';
    }
    else if (percentage > 89 && percentage <= 100) {
        return '#3a8d24';
    }    
});

JS Fiddle demo.

How to set the width of background-color of a div?

You can use background gradients with hard stops. Here I'm using custom properties on each element to dynamically set the length value. The CSS rule uses a partial attribute selector to look for the custom property in the style attribute.

div {
  background-color: #fc0;
  margin: 2px;
}

div[style*="--bg-length"] {
  background: linear-gradient(
    to right, 
    #fc0 var(--bg-length), /* the end of the colored segment */
    transparent var(--bg-length) /* the start of the transparent segment */
  );
}

<div><span>100% width of background</span></div>
<div style="--bg-length: 300px"><span>60% width of background</span></div>
<div style="--bg-length: 85%"><span>85% width of background</span></div>
<div style="--bg-length: 70vw"><span>85% width of background</span></div>

How to change the background color by the width of element?

Since you're using inline styles you can use the style property of the div to get the width in %

var currentWidth = $('.progress-bar')[0].style.width;
if (parseFloat(currentWidth, 10) < 100) {
    $('.progress-bar').css('background-color','red');
}

For multiple

$('.progress-bar').each(function(){
    var currentWidth = this.style.width;
    if (parseFloat(currentWidth, 10) < 11) {
        $(this).css('background-color','red');
    }
});

Change background and font color of fixed positioned div based on background

I've been playing around with mix-blend-mode and maybe I've got what you need. Check it, please. An important thing is you have to check compatibility with browsers.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

body {  margin-bottom: 50vh;}
.background1,.background2,.background3,.background4 {  height: 50vh;}
.background1 {  background: gray;}
.background2 {  background: black;}
.background3 {  background: blue;}
.background4 {  background: tomato;}
.fixed {  position: fixed;  top: 10px;  right: 10px;  width: 100px;  height: 100px;  mix-blend-mode: screen;}
.fixed-text {  background: green;  color: maroon;  mix-blend-mode: difference;  z-index: 3;  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}

<div class="background1">Div1</div><div class="background2">Div2</div><div class="background3">Div3</div><div class="background4">Div4</div><div class="fixed">  <div class="fixed-text">    This should change color based on background  </div></div>

Change CSS background color when DIV in viewport

Explanation

"When the user scrolls to the TOP of the blue div, the background color of the body changes to red."

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= $('#blue').offset().top) {
    $('body').css('background-color', 'red');
  }
  if (scroll >= $('#black').offset().top) {
    $('body').css('background-color', 'blue');
  }
  if (scroll >= $('#black').last().offset().top) {
    $('body').css('background-color', 'green');
  }
});

#blue {
  width: 400px;
  height: 800px;
  background: blue;
}

#black {
  width: 400px;
  height: 800px;
  background: black;
}

#red {
  width: 400px;
  height: 800px;
  background: red;
  margin-bottom: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blue"></div>
<div id="black"></div>
<div id="red"></div>

How to make background-color only cover the size of element?

Use width: fit-content and it will have the width of what is inside of the element.

.container {
  background-color: yellow;
  width: fit-content;
}

<div class="container"> random text </div>

How to Change the Color of <Div> Element Depending on Its Height or Width