Question

我有两个不同的图像（标识），一个用于黑色主题（它有浅色标识），另一个用于浅色主题（它有深色标识）。

用户可以自由选择黑暗主题或浅色主题。但是我在替换徽标时遇到了困难。有人可以帮我解决这个问题吗？

我的两个.png图片命名为lightlogo.png和darklogo.png。当页面加载时，用户可以看到黑暗的主题UI。

这是我显示徽标的代码

<div class="nav-wrapper">
  <a href="#!" class="brand-logo">
    <image  src="../images/lightlogo.png" alt="image" id="imag"   class="hidden-xs " />
  </a>
</div>

这是我的主题代码

<div id="icon-div">
  <p>
    <i class="material-icons dp48">loop</i>
  </p>
  <div id="icon-element">
    <input type="button" id="light" value="light-theme"/>
  </div>
</div>

这是我的用户可以更改主题的js，我正在尝试为浅色背景添加图像（浅色主题）

$('#light').click(function() {
  if ($(this).val() == "light-theme") {
    $(this).val("dark-theme");
    changeCSS("styleLight.css", 0)
  }
  else {
    $(this).val("light-theme");
    changeCSS("styleDark.css", 0).attr("src" , "../images/darklogo.png");
  }
});

function changeCSS(cssFile, cssLinkIndex) {

  var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

  var newlink = document.createElement("link");
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", "/stylesheets/"+cssFile);

  document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

Answer 1

试试这个，我已经删除了在javascript函数中更改图像src。

$('#light').click(function() {
  if ($(this).val() == "light-theme") {
    $(this).val("dark-theme");
    changeCSS("styleLight.css", 0)
    $('#imag').attr('src', "../images/darklogo.png");
  } else {
    $(this).val("light-theme");
    changeCSS("styleDark.css", 0)
    //.attr("src" , "../images/darklogo.png");
    $('#imag').attr('src', "../images/lightlogo.png");
  }
});

function changeCSS(cssFile, cssLinkIndex) {

   var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

   var newlink = document.createElement("link");
   newlink.setAttribute("rel", "stylesheet");
   newlink.setAttribute("type", "text/css");
   newlink.setAttribute("href", "/stylesheets/"+cssFile);

}

问题是你不能将attr()用于javascript函数。

Answer 2

您可以这样做，只需拥有主题的包装类，然后在更改主题时更改徽标src属性。

＆＃13;

$('#changeTheme').click(function() {
	var themeWrapper = $('#themeWrapper');
  var themeLogo = $('#themeLogo');
  
  if (themeWrapper.attr('class') === 'light-theme') {
    themeWrapper.attr('class', 'dark-theme');
    themeLogo.attr('src', '../images/darklogo.png');
  }
  else {
    themeWrapper.attr('class', 'light-theme');
    themeLogo.attr('src', '../images/lightlogo.png');
  }
});

＆＃13;

#themeWrapper {
  padding: 20px;
}
.light-theme {
  background-color: #999;
  color: black;
}
.dark-theme {
  background-color: #333;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="themeWrapper" class="light-theme">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">
      <image  src="../images/lightlogo.png" alt="Theme logo" id="themeLogo" class="hidden-xs" />
    </a>
  </div>
  <div>Random text...</div>
  <button type="button" id="changeTheme">Change theme</button>
</div>

＆＃13;

注意：此示例中的徽标没有工作src，但src属性发生了变化。

Answer 3

创建一个简单的函数，只需更改图标的src即可。并从改变主题的相同按钮调用它。

＆＃13;

function change(){
    if($("#imag").attr('src') != "http://www.thetechnologygeeks.com/images/icons/icon_mad.png"){
      $("#imag").attr("src","http://www.thetechnologygeeks.com/images/icons/icon_mad.png");
    } else {
      $("#imag").attr("src","https://filmscoremonthly.com/board/pics/icon6.gif");
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">
<image  src="https://filmscoremonthly.com/board/pics/icon6.gif" alt="image" id="imag"   class="hidden-xs " />
</a>
</div>


<button type="button" onclick="change()">Click Me!</button>

＆＃13;

如何根据背景主题替换徽标（图像）

3 个答案: