0

所以我正在做一个网站。我在 HTML 中包含了一个 twitter 时间线，您可以在此处查看它是如何完成的。.cust-twitter-div我已经检查了开发人员选项中的小部件元素，据我所知，它似乎是一个 iframe 元素，在我的 div() 元素中包含另一个 html 文档。

开发者选项截图

问题是我想进一步对小部件内的元素进行样式设置，并尝试了以下似乎不起作用的解决方案。

  1. 在每个样式中使用 !important 使用样式表中元素的默认类名。唯一似乎有效的 CSS 选择器是下面的选择器（注意 iframe 包含在选择器中，cust-twitter-div 是我包含小部件的 div）：
.cust-twitter-div iframe {
   width: 90% !important;
   max-width: 600px !important;
   box-shadow: 00px 0px 10px #ffbc50b6;
}
  1. （最令人费解的是为什么它不起作用）使用 JS 选择（再次使用它们的默认类名）元素并添加样式。
    document.onreadystatechange = function () {
      if (document.readyState == "complete") {
        console.log("DOM fully loaded and parsed");
        let cust_twitterElement = document.querySelector('.timeline-Body');
        console.log(cust_twitterElement);
      }
    }

现在，关于第二种解决方案的令人费解的是，它为我选择的元素返回 null。当我尝试选择 iframe 时，它​​返回了某种 JS 对象/HTML 元素。虽然在检查器中，它显示 iframe 元素有子元素，但我无法使用 JS 选择它们，因为返回的对象显示 firstChild 为 null，子元素长度为 0。如下所示：

返回对象截图 返回对象截图

我最终得出结论，iframe 是我可以在 JS 和 CSS 代码中交互的唯一元素，但不是检查器显示它包含的子元素。

那么我做错了什么？如何设置小部件内的元素样式？

4

0 回答 0