<span class="showOptions btn btn-default" style="display: inline-block; position: relative; z-index: 100; margin-right: 5px;"> <img style="height:16px;" border="0" src="/snsp/base/static/images/image/image.gif"> </span> 监听img标签的src值是否发生改变，如果改变输出“123123123”

可以使用 MutationObserver 监听 img 标签的 src 属性变化，代码如下：

const targetNode = document.querySelector('img'); // 监听的目标节点
const config = { attributes: true, attributeFilter: ['src'] }; // 监听 src 属性变化
const callback = function(mutationsList) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
            console.log('123123123');
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

当 img 标签的 src 属性发生变化时，会输出 "123123123"。

相关问题

解释一下这段代码<div class="sidebar-shortcuts" id="sidebar-shortcuts" style="display: none"> <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large"> <button class="btn btn-success"> <i class="ace-icon fa fa-signal"></i> </button> <button class="btn btn-info"> <i class="ace-icon fa fa-pencil"></i> </button> <!-- #section:basics/sidebar.layout.shortcuts --> <button class="btn btn-warning"> <i class="ace-icon fa fa-users"></i> </button> <button class="btn btn-danger"> <i class="ace-icon fa fa-cogs"></i> </button> <!-- /section:basics/sidebar.layout.shortcuts --> </div>

这段代码是一个 HTML 页面中的一部分，用于创建一个侧边栏的快捷方式菜单。

<div class="sidebar-shortcuts" id="sidebar-shortcuts" style="display: none">
    <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
        <button class="btn btn-success">
            <i class="ace-icon fa fa-signal"></i>
        </button>

        <button class="btn btn-info">
            <i class="ace-icon fa fa-pencil"></i>
        </button>

        <!-- #section:basics/sidebar.layout.shortcuts -->
        <button class="btn btn-warning">
            <i class="ace-icon fa fa-users"></i>
        </button>

        <button class="btn btn-danger">
            <i class="ace-icon fa fa-cogs"></i>
        </button>

        <!-- /section:basics/sidebar.layout.shortcuts -->
    </div>
</div>

首先，`<div>` 标签定义了一个具有 class 属性为 "sidebar-shortcuts" 的 `<div>` 元素，并设置了 id 属性为 "sidebar-shortcuts"，并通过 style 属性将其初始状态设置为不可见（display: none）。

在这个 `<div>` 元素的内部，又嵌套了一个具有 class 属性为 "sidebar-shortcuts-large" 的 `<div>` 元素，并设置了 id 属性为 "sidebar-shortcuts-large"。这个内层的 `<div>` 元素用于包含多个按钮，表示快捷方式菜单的大尺寸样式。

在内层的 `<div>` 元素中，有四个 `<button>` 元素，每个按钮都有不同的 class 属性和 `<i>` 元素作为图标。具体解释如下：

- 第一个 `<button>` 元素具有 class 属性为 "btn btn-success"，表示一个成功操作的按钮，内部使用了一个带有 class 属性为 "ace-icon fa fa-signal" 的 `<i>` 元素作为图标。
- 第二个 `<button>` 元素具有 class 属性为 "btn btn-info"，表示一个信息操作的按钮，内部使用了一个带有 class 属性为 "ace-icon fa fa-pencil" 的 `<i>` 元素作为图标。
- 第三个和第四个 `<button>` 元素类似，分别表示警告操作和危险操作的按钮，内部使用了对应的图标。

注释部分的代码是 HTML 注释，用于标记特定的代码段，在这里用于区分快捷方式菜单的布局部分。

总体来说，这段代码的作用是创建了一个侧边栏的快捷方式菜单，包含了不同样式的按钮和对应的图标。初始状态下，快捷方式菜单是隐藏的。

<div class="task-title" style=""> <button type='button' class='btn blue' onclick='funNext()'><font style='vertical-align: inherit;'>下一题</font></button> <button type='button' class='btn blue' onclick='funNext()'><font style='vertical-align: inherit;'>返&nbsp;&nbsp;回</font></button> <%--<button class="btn blue btn-block" onclick="funNext()">下一题</button>--%> <button class="btn blue btn-block" style="display:none" onclick="funNext1()">测试</button> </div> 上面的代码，我想让button在div中居中显示

要让 `<button>` 元素在 `<div>` 中居中显示，你可以使用 CSS 的 flexbox 布局来实现。需要对包含按钮的 `<div>` 添加一些 CSS 样式。

以下是一种实现的方法：

<div class="task-title" style="display: flex; justify-content: center; align-items: center;">
    <button type="button" class="btn blue" onclick="funNext()"><font style="vertical-align: inherit;">下一题</font></button>
    <button type="button" class="btn blue" onclick="funNext()"><font style="vertical-align: inherit;">返&nbsp;&nbsp;回</font></button>
    <%--<button class="btn blue btn-block" onclick="funNext()">下一题</button>--%>
    <button class="btn blue btn-block" style="display:none" onclick="funNext1()">测试</button>
</div>

在上面的代码中，我们将 `<div>` 的样式设置为 `display: flex; justify-content: center; align-items: center;`。这样，按钮将在水平和垂直方向上都居中显示。

请注意，为了更好地控制按钮的样式和布局，你可能需要根据需要调整和添加其他 CSS 样式。

希望这可以解决你的问题！如果还有其他问题，请随时提问。