Question

我的问题与this one非常相似，因为我需要将元素的背景颜色传递给javascript函数。不同之处在于我希望在样式表中将颜色定义在元素本身之外：

<!DOCTYPE html>
<html>
    <head>
        <style>

        button.red_button {
          background: red;
          cursor: pointer;
          border: none;
          width: 48px;
          height: 48px;
        }

        </style>

    </head>

    <body>

        <button class="red_button" onclick="javascript:changeColor(this)"></button>

        <p id="change_me">Click on the red box to change this text to red!</p>

        <script>
            function changeColor(button) {
                document.getElementById("change_me").style.color = button.style.background;
            }
        </script>
    </body>
</html>

当内联定义背景颜色时它可以正常工作，但是当它在外部声明时似乎无法找到它。

Answer 1

您可以使用getComputedStyle方法获取按钮上应用的所有样式。然后将其应用于文本

 function changeColor(button) {
   var style = window.getComputedStyle(button);
   document.getElementById("change_me").style.color = style['background-color'];
 }

DEMO

Answer 2

提及@ nnnnnn ，您可以使用getComputedStyle()获取元素的CSS，只需.style获取元素的内联style属性：

function changeColor(button) {
    document.getElementById("change_me").style.color = getComputedStyle(button)['background-color'];
}

Answer 3

<!DOCTYPE html>
<html>
    <head>
        <style>

        button.red_button {
          background: red;
          cursor: pointer;
          border: none;
          width: 48px;
          height: 48px;
        }

        </style>

    </head>

    <body>

        <button class="red_button" onclick="changeColor('#ff0000');"></button>

        <p id="change_me">Click on the red box to change this text to red!</p>

        <script>
            function changeColor(color) {
                document.getElementById("change_me").style.color = color;
            }
        </script>
    </body>
</html>

我所做的是改变了一些脚本，以便在功能上设置颜色，并自动为场所着色

如何在不使用内联样式表的情况下将此元素的颜色传递给javascript？

3 个答案: