Есть ли способ асинхронного повторного отображения элемента с его оригинальным форматированием CSS? - PullRequest
Новая
       3

Есть ли способ асинхронного повторного отображения элемента с его оригинальным форматированием CSS?

2 голосов
/ 22 апреля 2010

Например, 

<html>
<body>
<img id="pic" src="original.jpg"/>
</body>
</html>

В Javascript (jQuery): 

$("#pic").attr("src","newpic.jpg");

Теперь, есть ли способ сбросить #pic src на original.jpg без явной установки $("#pic").attr("src","original.jpg");?

Ответы [ 5 ]

3 голосов
/ 22 апреля 2010

Нет, невозможно выполнить сброс без переназначения, поскольку вы уже изменили DOM.

Но если вы присоединяете класс с помощью .addClass , тогда вы можете использовать .removeClassсбросить это.

1 голос
/ 22 апреля 2010

Теперь есть способ сбросить # рис. src to original.jpg без явного установив его как

Я думаю, что НЕТ, вы делаете все это в DOM, и вы не можете сортировать отменить ваши изменения. Однако вы можете использовать переменные поверх вашего скрипта с исходными значениями по умолчанию и использовать эти переменные для сброса элементов к исходным значениям. Например: 

<script>
var orig_image = 'original.jpg'; // top level variable

$(function(){
  $("#pic").attr("src","newpic.jpg");
});

// later on you show the original one
$('selector').click(function(){
  $("#pic").attr("src",orig_image);
});

</script>

Другим способом является использование CSS классов / идентификаторов, и, как предлагает S.Mark, вы можете использовать следующие функции: 

addClass()
removeClass()
0 голосов
/ 22 апреля 2010

другой способ - использовать $ .data, как это 

$(function() {
    $('body').data('original_image', $('#pic').attr('src'));
    $('#pic').attr('src', 'test.jpg');
});

для восстановления оригинала прочитайте данные: 

$('#pic').attr('src', $('body').data('original_image'));
0 голосов
/ 22 апреля 2010

Что-то вроде этого может быть? 

$.extend({
  tempcss: function(prop, val) {
    var props = $(this).data('tempcss') || [];
    props.push([prop, $(this).css(prop)]);
    $(this).css(prop, val);
  },
  revertcss: function() {
    var props = $(this).data('tempcss') || [];
    props.each(function(i, prop) {
      $(this).css(prop[0], prop[1]);
    });
  }
});

У него будут некоторые крайние случаи, и, очевидно, ваш исходный пример не является свойством css. Но все же.

0 голосов
/ 22 апреля 2010

Сначала вы можете получить все стили, затем делать все, что захотите, а затем получить все стили и сравнить два массива. Вот кое-что, с чего можно начать:

Массив всех стилей: 

            var allStyles = ["azimuth","background" ,"backgroundAttachment","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","border","borderBottom","borderBottomColor","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopStyle","borderTopWidth","borderWidth","bottom","captionSide","clear","clip","color","content","counterIncrement","counterReset","cssFloat","cue","cueAfter","cueBefore","cursor","direction","display","elevation","emptyCells","font","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","height","left","letterSpacing","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBottom","marginLeft","marginRight","marginTop","markerOffset","marks","maxHeight","maxWidth","minHeight","minWidth","orphans","outline","outlineColor","outlineStyle","outlineWidth","overflow","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","page","pageBreakAfter","pageBreakBefore","pageBreakInside","pause","pauseAfter","pauseBefore","pitch","pitchRange","playDuring","position","quotes","richness","right","size","speak","speakHeader","speakNumeral","speakPunctuation","speechRate","stress","tableLayout","textAlign","textDecoration","textIndent","textShadow","textTransform","top","unicodeBidi","verticalAlign","visibility","voiceFamily","volume","whiteSpace","widows","width","wordSpacing","zIndex"];

Вот цикл jQuery, который выплевывает значения после сравнения с другими значениями (в моем случае, $ other был другим элементом dom, но код, вероятно, достаточно похож. Вам нужно будет немного его отредактировать) 

        // Now we loop through each property, and report those defined
        $.each(allStyles, function(key, value){
            if ($this.css(value) !== undefined){
                if (($other.css(value) !== undefined) && ($this.css(value) !== $other.css(value))){
                    $("#jsStylesA").append("<li><span class='property'>"+value+"</span>: <span class='value'>"+$this.css(value)+"</span></li>");
                }
                else {
                    $("#jsStylesB").append("<li><span class='property'>"+value+"</span>: <span class='value'>"+$this.css(value)+"</span></li>");
                }
            }
        });

Как вы думаете, вы можете взять его отсюда?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...