Kann man JS nach Farbe testen?

ByLimonade44

Kann man ein Skript im eigenen Browser laufen lassen, dass z.B. alle blauen Schaltflächen auf einer Website versteckt?

Kann man ein Skript machen, dass immer wenn in einem Block eine blaue Schaltfläche auftaucht, der ganze Block ausgeblendet wird?

Also das würde nur das Aussehen der eigenen Seite verändern, nichts am Server, sondern nur welchen Teil einer Website man sieht! So könnte man z.B. immer den Sportteil einer News Seite automatisch ausblenden oder so.

(1 votes)
Loading...

Similar Posts

WordPress Problem beim Plugindownload?

Byluca06727

Hallo, ich wollte eine neue WordPressseite starten und als ich Plugins downloaden wollte kam das: Ein unerwarteter Fehler ist aufgetreten. Es scheint etwas bei WordPress.org oder mit dieser Serverkonfiguration nicht zu stimmen. Sollte das Problem weiter bestehen, nutze bitte die Support-Foren. Kann mir da wer helfen wie ich diese Problem beheben kann? Danke schonmal im Voraus!

Subscribe
Notify of
9 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
medmonk
medmonk
3 months ago

Yes, that can be implemented with JavaScript. Basically, only the color space is split and then the desired changes are made using the values.

const blueDetection = () => {
  const [r, g, b] = rgb.match(/\d+/g).map(Number);
  return b > 100 && (b - r > 50) && (b - g > 50);
}

In the next step, keep writing more functions, what exactly should happen. Be it edit, remove, and what else you want to do with it.

You can also create or query other color spaces in which you can not only see/filter the colors used by RGB. It ultimately depends on yourself how far you expand and apply your script with features.

2
Limonade44
Author
Limonade44
3 months ago
Reply to  medmonk

Can you hide the Parent Element as a result? And if so, how?

0
medmonk
medmonk
3 months ago
Reply to  Limonade44

This is also possible and JavaScript already brings everything necessary. For this with the DOM methods/properties closest and/or parentelement can work.

const parentElement = this.closest('.child');

Your function could look like this:

const removeBlueElements = () => {
  document.querySelectorAll('*').forEach(element => { 
    const bgColor = window.getComputedStyle(element).backgroundColor; 

    if (blueDetection(bgColor)) {
      element.closest('*')?.remove();
    } 
  }); 
};

With the universal selector (*), hold each higher-level element and then indicate that it is to be removed. In the if conditions, include your function to check the color and negotiate everything else.

1
slaxxer
slaxxer
3 months ago
Reply to  medmonk

could make n Cronjob drauß to automate this

0
Limonade44
Author
Limonade44
3 months ago

Thank you.

0
medmonk
medmonk
3 months ago

Oh, almost forgotten. If you’re using Tempermonkey, you’ll have to insert jQuery beforehand. You might have to look again, as I have done nothing with this extension myself.

// ==UserScript== 
// @name Blue Element Remover // 
// @require https://code.jquery.com/jquery-3.6.0.min.js 
// ==/UserScript==
1
Limonade44
Author
Limonade44
3 months ago

Thank you.

1
medmonk
medmonk
3 months ago

It doesn’t change much:

const blueDetection = (rgb) => { 
  const [r, g, b] = rgb.match(/\d+/g).map(Number); 
  return b > 100 && (b - r > 50) && (b - g > 50); 
};

const removeBlueElements = () => { 
  $('*').each(function() { 
    const bgColor = $(this).css('background-color'); 

    if (blueDetection(bgColor)) {
      $(this).closest('*').remove(); 
    } 
  }); 
};

It will QuerySelectorAll by $(”)and window.getComputedStyle(element) by $(element).css(‘background-color’) replaced. Everything else remains unchanged.

At the end, the actual function call has to come. Say the instruction to run the browser, these or those functions.

$(document).ready(function(){ 
  removeBlueElements(); 
  // more functions... 
});

Nevertheless, you would be advised to read the basics of JavaScript. Otherwise ask questions about questions and do not really understand. Alternatively, use ChatGPT to help you explain something more.

LG medmonk

1
Limonade44
Author
Limonade44
3 months ago

Is this about Jquery? Because I can only Jquery :/ or only go with Javascript. I ask because I would like to understand the code and Javascript is too high. Thank you in any case, if you have the nerve to translate it in Jquery, I would be twice grateful to you:) How to use the JS in the Tampermonkey Framework or how that was called a plugin in Firefox? LG

0