Question

我没有为div.size-option添加内联样式的代码，但第一个添加了随机内联样式。否则代码中的其他位置会使这些元素混乱。整体设置太复杂，无法在codepen中重现。

return <div id="options-container">
        {ctrl.model.map(function(model) {
            return <div class='size-option-container'
                onclick={() => { if(model.inStock()) vm.select(model.id()); }}
                option={model.id()}>
                <div
                    class={'size-option' +
                        (model.isSelected() ? ' selected': '') +
                        (model.inStock() ? '' : ' option-out-of-stock')}>
                    <span class='size'>{model.name()}</span>
                </div>
            </div>
        })}
</div>

编译：

return m(
        'div',
        { id: 'options-container' },
        ctrl.model.map(function (model) {
            return m(
                'div',
                { 'class': 'size-option-container',
                    onclick: function onclick() {
                        if (model.inStock()) vm.select(model.id());
                    },
                    option: model.id() },
                m(
                    'div',
                    {
                        'class': 'size-option' + (model.isSelected() ? ' selected' : '') + (model.inStock() ? '' : ' option-out-of-stock') },
                    m(
                        'span',
                        { 'class': 'size' },
                        model.name()
                    )
                )
            );
        })
);

输出：

<div id="options-container">
  <div class="size-option-container" option="1428">
    <div class="size-option selected" style="width: 127.333px; margin-right: 15px;"><span class="size">S</span></div>
  </div>
  <div class="size-option-container" option="1366">
    <div class="size-option"><span class="size">M</span></div>
  </div>
  <div class="size-option-container" option="1351">
    <div class="size-option"><span class="size">L</span></div>
  </div>
  <div class="size-option-container" option="1447">
    <div class="size-option"><span class="size">XL</span></div>
  </div>
  <div class="size-option-container" option="953">
    <div class="size-option"><span class="size">XXXL</span></div>
  </div>
  <div class="size-option-container" option="1016">
    <div class="size-option"><span class="size">XXXXL</span></div>
  </div>
  <div class="size-option-container" option="1070">
    <div class="size-option"><span class="size">4X</span></div>
  </div>
  <div class="size-option-container" option="1117">
    <div class="size-option"><span class="size">5X</span></div>
  </div>
</div>

特别是第一个size-option-container：

<div class="size-option selected" style="width: 127.333px; margin-right: 15px;"><span class="size">S</span></div>

更新

对类样式的随机更改会定期停止添加内联样式。

更新2

将style=''添加到div.size-option可以解决问题。

更新3

稍微改变HTML我现在有了一个新的随机风格： <div class="small-4 columns" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;"><div class="size-option-container" option="1428"><div style="" class="size-option"><span class="size">S</span></div></div></div>

Answer 1

由于您发布的代码根本不涉及样式属性，而且Mithril对样式完全不受欢迎，因此我很清楚这是修改内容的外部代码。

如果您使用的是现代Web浏览器，则可以使用DOM断点来识别导致这些修改的脚本。使用Chrome，例如：

将config函数添加到包装元素并在其中粘贴debugger语句：

return <div 
  id="options-container"
  config={function(el,init){
    if(!init)
      debugger
  }}
>

通过点击 F12 打开开发人员工具并（重新）加载运行脚本的页面：浏览器将在Mithril生成元素后立即暂停脚本执行。
< / LI>
Chrome会显示分配给el功能的config参数的值：右键单击它并'在导航器中显示' - 或右键单击显示的元素在浏览器中选择“选择”。
在元素面板中，右键单击应用了奇怪样式的元素，然后选择“Break on ...”＆gt; '属性修改'。
点击 F8 恢复脚本执行（它应该在debugger声明登陆时暂停。
只要脚本尝试修改相关元素的属性，浏览器就会暂停脚本执行，并显示执行该操作的代码行。当发生这种情况时，它可能是一个通用的属性修改方法jQuery或类似的。通过按 Ctrl + 。，您可以连续返回到调用此函数的函数，直到从到达一行代码源代码。

正在应用随机内联样式

1 个答案: