Kann man JS nach Farbe testen?

1 Antwort

medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Webentwicklung
22.11.2024, 00:04

Ja, dass lässt sich mit JavaScript umsetzen. Im Grunde lediglich der Farbraum gesplittet wird und dann anhand der Werte gewünschte Änderungen vornimmst. 

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

Im nächsten Schritt halt weitere Funktionen schreibst, was genau geschehen soll. Sei es editieren, entfernen und was sonst damit anstellen möchtest.

Ebenso weitere Farbräume anlegen bzw. abfragen kannst, in dem du nicht nur über RGB die genutzten Farben erkennen/filtern lässt. Es hängt letztendlich von dir selber ab, wie weit du dein Script samt Funktionen erweiterst und anwendest.

Woher ich das weiß:Berufserfahrung – Full-Stack Developer
slaxxer  22.11.2024, 10:37

könntest n Cronjob drauß machen um dies zu automatisieren

Limonade44 
Beitragsersteller
 22.11.2024, 00:26

Kann man als Folge das Parent Element ausblenden? Und wenn ja, wie?

medmonk  22.11.2024, 00:45
@Limonade44

Auch das ist möglich und JavaScript bereits alles nötige mitbringt. Dafür mit den DOM-Methoden/Eigenschaften closest und/oder parentElement arbeiten kannst.

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

Deine Funktion könnte dann u.a. so aussehen: 

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

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

Mit dem Universal-Selektor (*) halt jedes übergeordnete Element nimmst und dann anweist, dass eben jenes entfernt werden soll. In der if-Bedingungen deine Funktion zum Überprüfen der Farbe einbeziehst und alles weitere abhandelst.

Limonade44 
Beitragsersteller
 22.11.2024, 01:10
@medmonk

Geht das auch mit Jquery? Denn ich kann nur Jquery :/ oder geht das nur mit Javascript. Ich frag deswegen weil ich den Code auch gerne verstehen würde und Javascript mir zu hoch ist. Danke auf jeden Fall, falls du die Nerven hast es noch in Jquery zu übersetzen wäre ich dir doppelt dankbar :) Wie verwendet man das JS dann eigentlich, in dem Framework Tampermonkey oder wie das hieß als Plugin in Firefox? LG

medmonk  22.11.2024, 01:22
@Limonade44

Es ändert sich nicht viel:

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(); 
    } 
  }); 
};

Es wird querySelectorAll durch $(' '), und window.getComputedStyle(element) durch $(element).css('background-color') ersetzt. Alles andere bleibt soweit unverändert.

Am Ende muss halt noch der eigentliche Funktionsaufruf kommen. Sprich die Anweisung an den Browser, diese oder jene Funktionen auszuführen.

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

Nichtsdestotrotz dir anraten würde, dir die Grundlagen von JavaScript anzulesen. Andernfalls Fragen über Fragen stellst und es nicht wirklich verstehst. Dir Alternativ ChatGPT zur Hilfe nimmst, um dir etwas genauer erklären zu lassen.

LG medmonk

medmonk  22.11.2024, 01:30
@Limonade44

Achso, fast vergessen. Wenn du Tempermonkey verwendest, vorher noch jQuery einbinden musst. Da müsste du ggf. selber nochmal nachsehen, da ich selber schon eine ganze Weil nichts mehr mit dieser Erweiterung gemacht habe. 

// ==UserScript== 
// @name Blue Element Remover // 
// @require https://code.jquery.com/jquery-3.6.0.min.js 
// ==/UserScript==