Xい 2022-01-25 16:52 采纳率: 66.7%
浏览 55
已结题

想问一下问什么首次点击按钮2不能成功变化div2的颜色

1、第一次点击按钮2时不能成功调用函数try2()，点击两次可以调用，其他的时候都正常

2、代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #div1{
        position: relative;
        width: 100px;
        height: 100px;
        background: black;
        border: 1px solid blueviolet;
    }
    #div2{
        position: relative;
        width: 100px;
        height: 100px;
        background:transparent;
        border: 1px solid blueviolet;
    }
    </style>
    <script>
        function try1(){
            var div1=document.getElementById('div1');
            var div2=document.getElementById('div2');
            if(div1.style.background=='transparent'){
                div1.style.background='black';
                div2.style.background='transparent';
            }else{
                div1.style.background='transparent';
                div2.style.background='black';
            }
        }
        function try2(){
            var div1=document.getElementById('div1');
            var div2=document.getElementById('div2');
            if(div2.style.background=='transparent'){
                div2.style.background='black';
                div1.style.background='transparent';
            }else{
                div2.style.background='transparent';
                div1.style.background='black';
            }
        }
    </script>
</head>
<body>
    <button onclick="try1()">1</button><div id="div1"></div>
    <button onclick="try2()">2</button><div id="div2"></div>
</body>
</html>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-01-25 17:05
    关注

    div2.style.background获取不到级联样式表中的样式，只能获取到dom style属性中的。js改成下面的，获取级联样式中的背景色，但是注意transparent返回的是rgba格式的

    img

    如果不想改js代码，需要给dom直接添加style属性设置background
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            position: relative;
            width: 100px;
            height: 100px;
            background: black;
            border: 1px solid blueviolet;
        }

        #div2 {
            position: relative;
            width: 100px;
            height: 100px;
            background: transparent;
            border: 1px solid blueviolet;
        }
    </style>
    <script>
        function try1() {
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            if (getCss(div1, 'background-color') == 'rgba(0, 0, 0, 0)') {
                div1.style.background = 'black';
                div2.style.background = 'transparent';
            } else {
                div1.style.background = 'transparent';
                div2.style.background = 'black';
            }
        }
        function try2() {
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            if (getCss(div2, 'background-color') == 'rgba(0, 0, 0, 0)') {
                div2.style.background = 'black';
                div1.style.background = 'transparent';
            } else {
                div2.style.background = 'transparent';
                div1.style.background = 'black';
            }
        }
        function getCss(el, cssAttr) {
            var value = '';
            if ( el.currentStyle) {
                value = el.currentStyle[cssAttr];
            } else if (typeof window.getComputedStyle != 'undefine') {
                value = window.getComputedStyle(el, null)[cssAttr];
            }
            return value;
        }
    </script>
</head>
<body>
    <button onclick="try1()">1</button><div id="div1"></div>
    <button onclick="try2()">2</button><div id="div2"></div>
</body>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 2月2日
  • 已采纳回答 1月25日
  • 创建了问题 1月25日

悬赏问题

  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？