Question

例如，

<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");？

Answer 1

不，没有重新分配就没有办法重置，因为你已经改变了DOM。

但是如果你使用.addClass附加一个类，那么你可以使用.removeClass来重置它。

Answer 2

现在，有没有办法重置＃pic 没有明确的src到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 类/ ID，并且根据S.Mark的建议，您可以使用这些函数：

addClass()
removeClass()

Answer 3

您可以先获取所有样式，然后执行任何操作，然后再获取所有样式，然后比较两个数组。这是让你入门的东西：

所有样式的数组：

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

你认为你能从这里拿走吗？

Answer 4

这样的事可能吗？

$.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属性。但仍然。

Answer 5

另一种方法是使用像这样的$ .data

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

恢复原始，读取数据：

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

有没有办法用原始的CSS格式异步重新显示元素？

5 个答案: