【发布时间】：2021-06-11 18:56:51
【问题描述】：
我有一个 div 标签，其中包含一些文本和一个像 so 这样的 svg 图标
单击该选项卡后，它会像这样展开
一旦扩展，我希望 svg 图标更改为其他内容。到目前为止，我的代码没有给我任何错误，但也没有按预期工作。我目前有一个功能应该在单击元素后将图标更改为 icon-cancel.svg 没有任何变化。这是我所拥有的。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
font-family: 'Roboto Condensed', sans-serif;
}
#side-chat {
position: absolute;
right: 100%;
bottom:50%;
z-index:9999999999999 !important;
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
display:flex;
justify-content: center;
align-items: center;
color: #ffffff;
border-radius: 10px;
background: rgba(30, 175, 230, 0.5);
text-decoration: none;
padding: 15px;
font-size: 25px;
line-height: 20px;
text-align: center;
}
#olark-box-wrapper {
position: absolute;
z-index:99999999999999 !important;
top: 400px;
right: -300px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#olark-box-wrapper.chatbox-open {
right: 0
}
#olark-box-wrapper.chatbox-closed {
right: -300px;
}
#habla_window_div {
margin: 0 !important;
}
#side-chat img{
margin-right: 10px;
}
#side-chat:hover,
#side-chat:active {
background: #22a7e5;
}
</style>
</head>
<body>
<div id="olark-box-wrapper">
<!-- Olark chat tab -->
<a id="side-chat" href="javascript:void(0);" onclick="changeClass(); changeImage();">
<img src="icon-chat.svg">
Chat
</a>
<!-- Empty Olark chat box container -->
<div id="olark-box-container"></div>
</div>
<!-- begin olark code -->
<script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js");
/* custom configuration goes here (www.olark.com/documentation) */
//olark.configure('system.hb_detached', true);
olark.configure('box.inline', true);
olark.identify('xxxx-xxx-xx-xxxx');</script>
<!-- end olark code -->
<script type='text/javascript'>
// Javacript function to toggle the class of the chat box wrapper
function changeClass()
{
// Get the HTML object containing the Olark chat box
var olark_wrapper = document.getElementById("olark-box-wrapper");
// If the chat box is already open, close id
if ( olark_wrapper.className.match(/(?:^|\s)chatbox-open(?!\S)/) ) {
olark_wrapper.className = "chatbox-closed";
}
// Otherwise add open the Olark chat box
else {
olark_wrapper.className = "chatbox-open";
}
}
function changeImage(){
document.getElementById('side-chat').src = "icon-cancel.svg";
</script>
</body>
</html>
【问题讨论】：
-
你想要
getElementById这里：document.getElementId('side-chat').src = "icon-cancel.svg"; -
看起来像旧代码。你试过 classList.toggle() developer.mozilla.org/en-US/docs/Web/API/Element/classList （避免正则表达式）， event.listener developer.mozilla.org/en-US/docs/Web/API/EventListener 然后 setAttribute developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute 交换你的 svg uri 吗？
-
@RobMoll 这是我的问题中的一个错字，这是我的原始代码
标签： javascript html css svg