Is there a way to asynchronously redisplay an element with its original CSS formatting?_问答_开发者

For example,

<html>
<开发者_如何学Go;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's src to original.jpg without explicitly setting it as $("#pic").attr("src","original.jpg");?

No, there is no way to reset without reassigning it, since you already changed the DOM.

But if you attach a class using .addClass, then you could use .removeClass to reset that.

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

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

<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 do with CSS classes/IDs and as suggested by S.Mark, you could then use these functions:

addClass()
removeClass()

You can first get all styles, then do whatever you want, and then later get all styles, and then compare the two arrays. Here's something to get you 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 doing a comparison with another's values (in my case, $other was another dom element, but the code's probably similar enough. You will need to edit this slightly:

        // 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 from here?

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 isn't a css property. But still.

another way is to use $.data like this

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

to restore original, read the data :

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

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

精彩评论

关注公众号

热门标签

图文推荐

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：