时间戳

首页 > 解决方案 > 如何更改样式显示背景图片网址

javascript - 如何更改样式显示背景图片网址

问题描述

 function btnclick() {

 var btn = document.getElementById('M_menucol').style.display;
 
 if (btn == 'none')
 {
     document.getElementById('M_menucol').style.display = 'block';
     document.getElementById('M_menubtn').style.backgroundImage = "url(.../image/cancel.png)";

 }
 else {
     document.getElementById('M_menucol').style.display = 'none';
     document.getElementById('M_menubtn').style.backgroundImage = "url(.../image/menubtn.png)";

 }



 };

我想更改显示无以阻止和反转+背景图像 url 显示更改正在工作，但背景图像更改不起作用请给我解决方案...对不起我的英语不好

对不起，我的意思是当我单击按钮时，它会打开一个菜单，并且按钮的图像会发生变化。再次单击该按钮将关闭菜单并将图像返回到其原始状态。

我会努力学习的；）

https://jsfiddle.net/phnzb10m/12/

标签： javascripthtmlcss

解决方案

  1. 在你的小提琴中，为什么你在设置它们的样式col时btn用逗号分隔？我想你的意思是分号
  2. 在您的小提琴中，元素 id 是Mmenubtn您M_menubtn在脚本中编写的
  3. 你应该知道这style是一个元素的对象，所以它不能输出样式集style或link标记它只是通过js输出内联样式或样式集给它
  4. 如果您想通过style或link标签获取样式集，您将需要使用getComputedStyle()方法
  • 默认情况下，当没有任何内联样式时，style对象属性的值为空字符串，因此您可以检查它是否返回空字符串或none然后执行您的脚本
  1. 按显示属性
    function btnclick() {
      var col = document.getElementById('M_menucol');
      var btn = document.getElementById('M_menubtn');

      if (col.style.display === "" || col.style.display == 'none') { 
            col.style.display = 'block'
            btn.style.backgroundImage = "url(https://postimg.cc/68V0PW0t)";
      } else { 
            col.style.display = 'none'
            btn.style.backgroundImage = "url(https://i.postimg.cc/vBVMcpmM/menubtn.png)";
      }
    }
  1. 通过 getComputedStyle() 方法
    function btnclick() {
      var col = document.getElementById('M_menucol');
      var btn = document.getElementById('M_menubtn');

      if (getComputedStyle(col, null).display == 'none') { 
            col.style.display = 'block';
            btn.style.backgroundImage = "url(https://postimg.cc/68V0PW0t)";
      } else { 
            col.style.display = 'none';
            btn.style.backgroundImage = "url(https://i.postimg.cc/vBVMcpmM/menubtn.png)";
      }
    }

推荐阅读