从视口的顶部元素获取颜色

Question

我正在创建一个按钮以转到页面底部，并且我希望按钮背景颜色与触摸视口的第一个元素相同。 按钮正在工作，但我无法获得顶部元素颜色。 检查此图像以了解我需要什么。 https://i.ibb.co/4SrqGQW/Screenshot-20191018-114922.jpg

我当前的代码

// ==UserScript==
// @name          bottom button 
// @namespace     bottom
// @description   go to bottom
// @include       *://*/*
// @grant         GM_addStyle 
// @noframes
// ==/UserScript==
var btmbtn = document.createElement("div");
btmbtn.innerHTML = '<div id="bottom1">▼</div>';
btmbtn.onclick = function() {
    window.scrollTo(0,document.body.scrollHeight);
};
document.getElementsByTagName("html").item(0).appendChild(btmbtn);
GM_addStyle ( `
#bottom1  {
background-color: blue;
position: fixed;
bottom: 10vw;
right: 2vw;
z-index: 9999999;
border-radius: 100%;
width: 10vw;
height: 10vw;
font-size: 5vw;
text-align: center;
line-height: 10vw;
} 
` );

Answer 1

您可以使用以下方法轻松访问正文中的第一个 DOM 对象 var first = document.body.children[0]; 并访问它的样式属性。 但要记住的是，这可能并不总是适用于您的情况。 例如：- 如果您在顶部有一个容器或任何其他元素，但在代码中不在主体的顶部，则您只会在代码中的主体开始之后才获得元素的属性，而不是视口本身的第一个元素。 你可以看看this