Скрыть div внутри (например, Twitter) shadow-dom с помощью JavaScript - PullRequest
Новая
       6

Скрыть div внутри (например, Twitter) shadow-dom с помощью JavaScript

0 голосов
/ 21 сентября 2018

Использование TamperMonkey для упрощения просмотра страниц на моей стороне и желание скрыть часть внешних карт Twitter от печати.Изображение во EmbeddedTweet все равно не печатается и оставляет большой пустой прямоугольник, который тратит ценное пространство.

DOM выглядит как на рисунке ниже - как бы я нацелился на DIV с классом SummaryCard-image (зеленая стрелка)?Для меня не имеет значения, удален ли DIV из DOM или просто скрыт с помощью CSS.

Я пробовал следующие методы, которые не работают:

(1) ИнъекцияCSS с .SummaryCard-image{display:none !important;}

(2) jQuery: $('.SummaryCard-image').remove();

$('.SummaryCard-image').length возвращает 0

(обратите внимание на #shadow-root (open), 2-й элементсверху)

enter image description here

1 Ответ

0 голосов
/ 21 сентября 2018

Вам нужно выбрать первый корень теневого корня, чтобы перейти к этому элементу.Вам нужно что-то вроде этого 

var twitterWidget= document.querySelector('twitterwidget').shadowRoot;
twitterWidget.querySelector('.SummaryCard-image').style.display = "none";

Для нескольких виджетов Twitter 

    var twitterWidgets = document.querySelectorAll('twitterwidget'); 

    twitterWidgets.forEach(function(item){
      var root = item.shadowRoot; root.querySelector('.SummaryCard-image').style.display = 'none';
    })

Пример https://rawgit.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/raw/fancy-tabs-demo.html

var tabs= document.querySelector('fancy-tabs').shadowRoot
tabs.querySelector('#tabs').style.display = none
...