Как остановить автоматический стиль на html

Question

У меня есть показ слайд-шоу, который мне нужно преобразовать в одну страницу html. Я использовал jQuery, чтобы удалить код всех добавленных классов opens.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

Это не поведение по умолчанию, должно быть событие изменения размера окна, указанное делегатом @Bas Van Stein в коде, вызывающем это.

Чтобы исправить это, вы можете просто удалить attr «style» из целевого div.

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

Пример: http://jsfiddle.net/mzg2zk48/2/