CSS-Selektor Problem

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?
Code:
// 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 = "";                         
})()
 
Das ist kniffliger.
Javascript:
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.
 
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.
Javascript:
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.
 
Zuletzt bearbeitet:
Kaum macht man's richtig…

Code:
(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 = "";
      }
    })
  })

})()
 
Zurück