javascript - 使用 innerHTML 时 CSS 属性被覆盖

Question

我正在尝试将自定义 jquery slider 插入到我的 html 中:

<p><input type="text" data-slider="true" data-slider-theme="volume" />
<span style="vertical-align: top"></span>
<script>
$("[data-slider]")
  .bind("slider:ready slider:changed", function (event, data) {
    $(this).nextAll("span").html(data.value.toFixed(3));
  });
</script></p>

这是在模态窗口内。当我将其硬编码到模态窗口中时，它工作正常，样式完美。

但是，在我的 javascript 中，当我将 .append 与 jquery 或 .innerhtml 一起使用时，我将它插入到 div 中，它显示为只是一个普通的文本框，没有硬编码版本显示的自定义 slider css。

                        insert_review.innerHTML += '\
                        <li class="review">\
                            <center>\
                                <p><input type="text" data-slider="true" data-slider-theme="volume" />\
                                <span style="vertical-align: top"></span>\
                                <script>\
                                $("[data-slider]")\
                                  .bind("slider:ready slider:changed", function (event, data) {\
                                    $(this).nextAll("span").html(data.value.toFixed(3));\
                                  });\
                                <\/script></p>\
                            <\/center>\
                        </li>\
                        ';

Answer 1

使用 css 类而不是内部 HTML 样式。从长远来看，当您需要应用大量样式时，最好进行练习。但是，是的，一旦你这样做了，只需添加 !important 标签。无论如何，这将使该属性保持不变。

<style>
    .myClass{
        vertical-align: top !important;
    }
</style>