Получить ширину и высоту div, игнорируя атрибут «style»

У меня возникла проблема с получением исходной ширины и высоты div без свойства стиля, которое генерируется кодом.Получить ширину и высоту div, игнорируя атрибут «style»

Это, как я ее решил

var currentWidth = $("#container").width(); 
    var currentHeight = $("#container").height(); 

    $("#container").removeAttr("style"); 


    var containerWidth = $("#container").width(); 
    var containerHeight = $("#container").height(); 

    $("#container").css("width", currentWidth, "height", currentHeight); 


    $("#container").animate({ 
     width: containerWidth, 
     height: containerHeight 
    }, "slow");

Это очень плохо закодированы и он не анимировать высоту. Я думаю, что есть более простой способ решить эту проблему. Как, например, $("#container").width(ignoring style attr);

Редактировать, лучше explenation:

В моем файле CSS оригинальный размер контейнера 500x500. Но тогда, когда вы нажимаете на ссылку, она изменяется на 800x800 (добавляет стиль атрибута), теперь, когда вы нажимаете «назад», я хочу, чтобы она вернулась к 500x500, но я хочу, чтобы код узнал оригинальный размер для более легких изменений.

код, который изменяет #container:

$("#container").animate({ 
     width: 1250, 
     height: 600 
    }, "slow");

Спасибо заранее!

источник

2014-02-14 Jacob

Я не уверен, но не просто сохранил бы 'width: auto' и' height: auto' works? или просто 'width:" "и' height: "" '. –

не понял, что вам нужно в точности? – Sora

Sora: Я просто хочу, чтобы он оживился до первоначальной ширины и высоты, игнорируя атрибут «стиль». – Jacob

Обновлено:

Сохраняйте оригинальную ширину и высоту, как min-width и min-height т.е. в вашем случае:

min-width: 500px; 
min-height: 500px;

, а затем сделать это с помощью JQuery:

$("#container").animate({ 
    width: "", 
    height: "" 
}, "slow");

Working Fiddle

источник

2014-02-14 09:19:52

Ваша скрипка отлично работает, но она не будет работать над моим кодом. – Jacob

@JacobJohansson сохраняет исходную ширину и высоту как 'min-width' и' min-height' .. он будет работать. [обновленная скрипка] (http://jsfiddle.net/LJDx4/1/). –

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var curentDivWidth = 500; 
    var curentDivHeight = 500; 
    var clicked = false; 
    $("#ClickMe").click(function() { 
     if (!clicked) { 
      $("#container").animate({ 
       width: 1250, 
       height: 600 
      }, "slow"); 
      clicked = true; return; 
     } 
     $("#container").animate({ 
      width: curentDivWidth, 
      height: curentDivHeight 
     }, "slow"); 
     clicked = false; 
    }); 

}); 
    </script> 
<title>example</title> 
    </head> 
    <body> 
    <a href="javascript:void(0)" id="ClickMe" >click me </a> 
    <div id="container" style="border:1px solid black" > 
    the div 

    </div> 
    </body> 
    </html>

jsfiddle: http://jsfiddle.net/seekpunk/JhzAD/

источник

2014-02-14 09:42:42 Sora

Получить ширину и высоту div, игнорируя атрибут «style»

ответ

Смежные вопросы