如何在 html 上停止自动设置样式

Question

我有一些显示幻灯片需要转换为单页 html。我已经使用 jQuery 去除所有 reveal.js 添加的类、javascript 和样式表的代码。出于某种原因，当我调整页面大小时，div 中添加了一种样式，隐藏了一半的内容。

调整大小前我的代码：

<div id="body">
    <div id="slides-body">
        <section id="slide-Title">
            <div id="div-Title">
                <h2>
                    My Title
                </h2>
                <button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
            </div>
        </section>
    </div>
</div>

调整大小后我的代码：

<div id="body">
    <div id="slides-body" style="width: 960px; height: 770px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.920625);">
        <section id="slide-Title">
            <div id="div-Title">
                <h2>
                    My Title
                </h2>
                <button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
            </div>
        </section>
    </div>
</div>

为什么会这样？我该如何解决？

Answer 1

这不是默认行为，必须有一个 window resize 事件，正如@Bas Van Stein 在代码中委派的那样。

要修复它，您只需从目标 div.

中删除属性 "style"

<script>
$().ready(function(){
$( window ).resize(function() {
  $("#slides-body").removeAttr("style");
});
});
</script>

示例：http://jsfiddle.net/mzg2zk48/2/

如何在 html 上停止自动设置样式

How to stop auto styling on html

html

javascript

css

jquery

reveal.js