CSS-Selektor Problem

[jemand anders]

Das HTML muss interpretiert und mit dem CSS verknüpft werden.
Am besten kann das ein Browser.

Wenn du den JS Code im Browserkontext ausführst, kannst du den datastring einfach in den DOM hängen und mit window.getComputedStyle den Style abrufen.

Wenn du in Node/Deno unterwegs bist, benötigst du eine Headles Browser Engine wie zB Puppeteer

Okay, lesen kann ich sie jetzt, aber wie löschen oder ändern?

// auf Seite https://www.businessinsider.de/wirtschaft/letzte-generation-so-viel-verdient-aktivist-der-protestgruppe/
(function() {
  document.querySelectorAll('div[id^="sp_message_container"]')[0].remove();
  const para = document.querySelector(".sp-message-open body");
  const compStyles = window.getComputedStyle(para);
  //para.textContent =
  console.log(
    `My computed overflow is ${compStyles.getPropertyValue("overflow")},\n` +
    `and my computed position is ${compStyles.getPropertyValue("position")}.`
  );
  document.querySelectorAll("body")[0].style.overflow = "";
  document.querySelectorAll("body")[0].style.position = "";                         
})()

 

[Andreas-B]

Das ist kniffliger.

element.style.overflow = ""

Wird nur funktionieren, wenn die Property vorher schon gesetzt ist und würde nur den Style auf den Wert setzen, der im externen CSS definiert ist.

Du könntest die Property zum Beispiel auf den Wert setzen, den du möchtest. Damit würdest du den Style aus dem externen CSS allerdings nur überschreiben und nicht löschen.
(Das würde ich aber empfehlen)

Wenn du den Style wirklich löschen möchtest, musst du den CSSOM manipulieren und dort alle Regeln zu dem Element löschen. Das kann aber sehr anstrengend sein und außerdem Browser spezifische Unterschiede haben.

Was möchtest du denn erreichen? Eventuell geht das auch anders.

 

[jemand anders]

Wenn ich die Werte wenigsten ändern könnte, das würde mir ja schon reichen. Aber selbst das hat bisher nicht geklappt.

Das ist kniffliger.

element.style.overflow = ""

Wird nur funktionieren, wenn die Property vorher schon gesetzt ist und würde nur den Style auf den Wert setzen, der im externen CSS definiert ist.

Du könntest die Property zum Beispiel auf den Wert setzen, den du möchtest. Damit würdest du den Style aus dem externen CSS allerdings nur überschreiben und nicht löschen.
(Das würde ich aber empfehlen)

Wenn du den Style wirklich löschen möchtest, musst du den CSSOM manipulieren und dort alle Regeln zu dem Element löschen. Das kann aber sehr anstrengend sein und außerdem Browser spezifische Unterschiede haben.

Was möchtest du denn erreichen? Eventuell geht das auch anders.

 

[jemand anders]

Kaum macht man's richtig…

(function() {

  console.clear();

  document.querySelectorAll('div[id^="sp_message_container"]')[0].remove();

  /*
  const para = document.querySelector(".sp-message-open body");
  const compStyles = window.getComputedStyle(para);
  //para.textContent =
  console.log(
    `My computed overflow is ${compStyles.getPropertyValue("overflow")},\n` +
    `and my computed position is ${compStyles.getPropertyValue("position")}.`
  );
  */

  const stylesheets = document.styleSheets;

  stylesheets.forEach((s) => {

    s.rules.forEach(r => {
      if (r.selectorText == '.sp-message-open body') {
        r.style.overflow = "";
        r.style.position = "";
      }
    })
  })

})()

 

[Andreas-B]

wenn das dein Ziel war: Glückwunsch!

 

[jemand anders]

Dein CSSOM-Hinweis hat mich zur Lösung geführt.