获取并使用背景颜色在其他窗口中应用相同的颜色

Posted 2021-04-07

我正在做Chrome扩展程序，我需要获取当前页面的背景颜色，并将窗口的背景颜色更改为之前获得的颜色，如何在javascript（有或没有jQuery）中执行此操作，如果需要html或CSS？

答案

您可以使用DOMObject.style.backgroundColor和window.getComputedStyle：

<object to set background color of>.style.backgroundColor = window.getComputedStyle(document.getElementsByTagName(“BODY”)[0], null).getPropertyValue("background-color")

你可以在这里找到文档：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

另一答案

在同一窗口中尝试此活动：

  <script src="https://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous"></script>
<style>
    body {
        background: #279DDD;
    }
</style>
<p>Click the button to put the new window in the current window.</p>

<button onclick="myFunction()">Try it</button>

<script>
    function myFunction() {
        debugger;
    var bgColor=$('body').css('background');
    var myWindow = window.open("", "_self");
    myWindow.document.write("<p>I replaced the current window.</p>");
    myWindow.document.body.style.background = bgColor;
}
</script>

或者这个在新窗口中

试试这个 ：

      <script src="https://code.jquery.com/jquery-3.2.1.js"
            integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
            crossorigin="anonymous"></script>
    <style>
        body {
            background: #279DDD;
        }
    </style>
    <p>Click the button to put the new window in the current window.</p>

    <button onclick="myFunction()">Try it</button>

    <script>
        function myFunction() {
            debugger;
        var bgColor=$('body').css('background');
        var myWindow = window.open("", "_self");
        myWindow.document.write("<p>I new window.</p>");
        myWindow.document.body.style.background = bgColor;
    }
    </script>