Have Geek Brain

Is there a way to asynchronously redraw an element with its original CSS formatting?

For instance,

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

In Javascript (jQuery):

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

Now, is there a way to reset #pic

src to original.jpg

without explicitly setting it like $("#pic").attr("src","original.jpg");

?

+2


a source to share


5 answers


No, there is no way to reset without reassignment, since you've already changed the DOM.



But if you attach the class using . addClass , you can use .removeClass to reset that.

+3


a source


Now, is there a way to reset # pic's src to original.jpg without explicitly setting it like

I think not, you are doing all of this in the DOM and you cannot sort to undo your changes. However, you can use variables on top of the script with the original defaults and use those variables to reset to the original values. For instance:

<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>


Another way is to use CSS classes / IDs, and as suggested by S.Mark, you could use the following functions:

addClass()
removeClass()
+1


a source


You can get all the styles first, then do whatever you want, then get all the styles, and then compare the two arrays. Here's what you need to get started:

An array of all styles:

            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"];

Here's a jQuery loop that spits out the values ​​after comparing with other values ​​(in my case $ other was a different dom element, but the code was probably quite similar. You will need to change that value a little:

        // 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>");
                }
            }
        });

Do you think you can take it here?

0


a source


Something like this maybe?

$.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]);
    });
  }
});

It will have some edge cases and obviously your original example is not a css property. But still.

0


a source


Another way is to use such $ .data p> 

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

to restore the original, read the data:

$('#pic').attr('src', $('body').data('original_image'));
0


a source






More articles:


All Articles