Jquery change color of text right away if detect it's color changed

Question

I'm still kind of a newbie at Jquery, I'm trying to change a text color if it detects the text color code changed to #28a745 and I can't get it to work.

The button is just an example for on the event of color change, the color change can come from anything like class events,....

$("#change").on("click", function() {
    $("#remember-me").css("color", "#28a745");
});
if ($('#remember-me').css("color") == "#28a745"){
  $("#remember-me").css("color", "#495C83");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="change">change</button>
<div id="remember-me">some text</div>

Hope someone can help me!

it's just an example i would like to implement to thing like if a text color change then the color of that text or another text also change to different color — Linh Nguyen, Oct 10 '19 at 03:44
then you just need to insert $("#remember-me").css("color", "#495C83"); inside your function no need for if — Franz, Oct 10 '19 at 03:46
i don't think you get what i mean in the post i want to detect if a text color change and execute a changing color function not just change the color — Linh Nguyen, Oct 10 '19 at 03:47
Simple! Just change `if ($('#remember-me').css("color") == "#28a745"){` to the RGB equivalent! — EGC, Oct 10 '19 at 03:54
What you want is `if ($('#remember-me').css("color") == "rgb(40, 167, 69)"){` — EGC, Oct 10 '19 at 03:56
Just chuck whichever color you want into this: https://www.rapidtables.com/convert/color/hex-to-rgb.html and then format like this `rgb(red,green,blue)` — EGC, Oct 10 '19 at 03:57
hmm i don't think that quite it, i dont want to bind the color check on the button click, i only use the button to change the color of a text to rgb(40, 167, 69) to demonstrate example of if a page color is changed live then it will auto convert color of #28a745 to #495C83 — Linh Nguyen, Oct 10 '19 at 04:02
https://stackoverflow.com/a/11307074/11700321 ? You want to hook into a `stylechanged` event using a listener. Seems very difficult. You can do it on page load instead which is easy? Is that what you're after? — EGC, Oct 10 '19 at 04:03
yeah that kind of thing is what im after like the oninput event — Linh Nguyen, Oct 10 '19 at 04:06
Research mutationObserver. It will be able to monitor the DOM for changes & as a result offer you the solution you need. It is difficult to implement from what I can see & I can only assume it is quite costly. — EGC, Oct 10 '19 at 04:09
i see on the frontend the only way i think to do this is either using javascript or jquery — Linh Nguyen, Oct 10 '19 at 04:10
Unfortunately, yes, and once again, that can be very costly in terms of performance. — EGC, Oct 10 '19 at 04:13

score 0 · Answer 1 · answered Oct 10 '19 at 03:47

0

If what you're asking is how to toggle the color between the two colors, then you will need to change your code a bit. Also note that .css("color") will return a color in RGB, so you will need to either convert it, or use RGB colors instead.

Something like this:

  $("#change").on("click", function() {
    let color_1 = "rgb(40, 167, 69)";
    let color_2 = "rgb(73, 92, 131)";
    let rememberMe = $("#remember-me");
    let currentColor = rememberMe.css("color");

    // if currentColor is equal to color_1, then set it to color_2,
    // otherwise, if it's not equal to color_1, then set it to color_1
    rememberMe.css("color", 
      currentColor === color_1 ? color_2 : color_1);
  });

answered Oct 10 '19 at 03:47

James Hay

7,115
6
33
57

1

actually i don't want to toggle i just want the text color to change right away if it detect the color code equal to rgb(40, 167, 69) – Linh Nguyen Oct 10 '19 at 03:51
Oh. There's no built in way to monitor the current style of an element, apart from maybe [this](https://stackoverflow.com/a/20683311/845704) answer. Otherwise you would need a loop running on a timer to continually check if something has changed. – James Hay Oct 10 '19 at 03:59
"Keep in mind that this only works with inline styles, not when the style changes as a consequence of class change or @media change" well that kinda disappointing since in my project the color will be change by a class – Linh Nguyen Oct 10 '19 at 04:04
@LinhNguyen yeah. I think you may be able to use the `MutationObserver` described there, on the element itself, so you could observer for class changes instead. Your other option is continually checking in javascript inside a loop. It's quite a heavy handed approach though. – James Hay Oct 10 '19 at 04:09

4b0 · Answer 2 · 2019-10-10T04:08:10.177

0

Use addClass and removeClass with hasClass to get your desire out put like below.

$("#change").on("click", function() {
  $("#remember-me").addClass('yourFirstClass');
  if ($('#remember-me').hasClass('yourFirstClass')) {
    $("#remember-me")
      .removeClass('yourFirstClass')
      .addClass('yourSecondClass');
  }
  //else {
  //$("#remember-me").removeClass('yourSecondClass');
  //$("#remember-me").addClass('yourFirstClass');
  //}
});

.yourFirstClass {
  color: #28a745;
}

.yourSecondClass {
  color: #495C83;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="change">change</button>
<div id="remember-me">some text</div>

edited Oct 10 '19 at 04:08

answered Oct 10 '19 at 03:48

4b0

21,981
30
95
142

it still working as a toggle not a change detect :( – Linh Nguyen Oct 10 '19 at 03:54
1

What do you mean by change ? – 4b0 Oct 10 '19 at 03:55
If you want it's mean page load and to remember class you need to hold that state on local storage or some where . – 4b0 Oct 10 '19 at 03:57
like if a text color is changed to #28a745 then it will auto replace the color of #28a745 to #495C83, sorry my english skills are kind of limited – Linh Nguyen Oct 10 '19 at 03:57
In case remove else part . It's detect first class and if it's has , replace with second class. See Updated answer. – 4b0 Oct 10 '19 at 04:09

Sarabjit Singh · Answer 3 · 2019-10-10T04:12:09.727

0

Using this script you can change color as you want.

 $("#change").on("click", function() {
  var clr = $('#remember-me').css('color');
    var hex = rgb2hex(clr);
    
    
    if(hex != "#28a745"){
     $("#remember-me").css("color", "#28a745");
    }else{
      $("#remember-me").css("color", "#495C83");
    }
   
});




function rgb2hex(orig){
 var rgb = orig.replace(/\s/g,'').match(/^rgba?\((\d+),(\d+),(\d+)/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) : orig;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button id="change">change</button>
<div id="remember-me">some text</div>

edited Oct 10 '19 at 04:12

answered Oct 10 '19 at 03:59

Sarabjit Singh

611
7
17

@JamesHay, you use multiple variable that confused, i have do it by a single variable and that is so simple – Sarabjit Singh Oct 10 '19 at 04:01
Yeah, except that OP already stated it's not a toggle he wants. – James Hay Oct 10 '19 at 04:01
@Linh, check this it compare hex val – Sarabjit Singh Oct 10 '19 at 04:12
1

i tried it in the if outside of the button click and it still doesn't change, like EGC suggested, i think i need to create a custom stylechanged event to check – Linh Nguyen Oct 10 '19 at 04:18

Jquery change color of text right away if detect it's color changed

3 Answers3