当前位置: 首页 > 知识库问答 >
问题:

如何在Input-JavaScript中获取div的背景颜色

华峰
2023-03-14

我不知道为什么这个代码不能工作!为什么显示警报空白?

<html lang="en">

    <head>
        <title>Document</title>
        <style>
            #dd{
                height: 300px;
                width: 300px;
                background-color: mediumblue;
                color: white;
            }

        </style>
    </head>

    <body>
        <label>Color </label><input id="in1" type="text">
        <hr>

        <div id="dd">
    </div>

        <script>
            var colorTextBox = document.getElementById("in1");
            var div = document.getElementById("dd");

            div.onclick = function(){
                colorTextBox.value = div.style.backgroundColor;
        alert(div.style.backgroundColor);
            }

        </script>
       
    </body>
</html>

当点击div时,div的背景颜色应该写在输入框中,并且也显示在警报中。

共有1个答案

白宏义
2023-03-14

有了这个,它就会计算rgb颜色:`

    var colorTextBox = document.getElementById("in1");
                var div = document.getElementById("dd");

                div.onclick = function(){
                    //colorTextBox.value = div.style.backgroundColor;
            //alert(div.style.backgroundColor);
            
            const element = document.querySelector('#dd');
            const style = getComputedStyle(element)
            var color= style.backgroundColor;
            alert(color);
                }
html lang-html prettyprint-override">    <html lang="en">

        <head>
            <title>Document</title>
            <style>
                #dd{
                    height: 300px;
                    width: 300px;
                    background-color: mediumblue;
                    color: white;
                }

            </style>
        </head>

        <body>
            <label>Color </label><input id="in1" type="text">
            <hr>

            <div id="dd">
        </div>

            <script>
                
            </script>
           
        </body>
    </html>
 类似资料:
  • 问题内容: 我没有使用CSS3。所以我不能使用或属性。不使用这些属性,如何使a透明?它应该是此链接中的文本框示例。这里的文本框背景色是透明的。我想做同样的事情,但是不使用上面提到的属性。 问题答案: 不透明度使您透明或透明。在这里查看示例Fiddle。 注意:这些不是CSS3属性

  • 问题内容: 有谁知道使用JavaScript交换网页背景色的简单方法? 问题答案: 修改JavaScript属性。 例如: 注意:这确实取决于页面的组合方式,例如,如果您使用的背景颜色不同的DIV容器,则需要修改其背景颜色而不是文档主体。

  • 问题内容: 是否可以将div中的背景图像居中放置?我已经尝试了几乎所有内容-但没有成功: 这可能吗? 问题答案:

  • 本文向大家介绍如何在HTML中设置背景颜色?,包括了如何在HTML中设置背景颜色?的使用技巧和注意事项,需要的朋友参考一下 要在HTML中设置背景颜色,请使用style属性。style属性指定元素的内联样式。该属性与HTML <body>标记以及CSS属性background-color一起使用。HTML5不支持<body>标记的bgcolor属性,因此CSS样式用于添加背景色。HTML5中不推荐

  • 我没有使用 CSS3。所以我不能使用或属性。如果不使用这些属性,如何使 透明?它应该是此链接中的文本框示例。此处的文本框背景色是透明的。我想做同样的事情,但不使用上面提到的属性。

  • 我刚开始编程,这是我第一次尝试学习新东西。我不知道我的代码有什么问题,因为它不想工作。我所需要的只是通过点击div来改变bg的颜色。如果在“function”之前删除第一行代码,它就会起作用,但只有在重新加载页面时才起作用。