javascript - 保存元素的 CSS 并稍后重新应用

Question

是否可以保存“当前”应用于元素的所有 CSS，然后再重新应用它？我正在处理一个固定的表头，当我更改 position:fixed 时，它会丢失所有应用的样式。我目前保存了列宽并重新应用到表头:

            $('#tableHeader').css({
                position:'fixed',
                width:$('#tablePanel').width(),
                top:$('#top').height(),
            });

            $('.column1Value').width(col1Width);
            $('#col1').width(col1Width);

            $('.column2Value').width(col2Width);
            $('#col2').width(col2Width);

            $('.column3Value').width(col3Width);
            $('#col3').width(col3Width);

            $('.column4Value').width(col4Width);
            $('#col4').width(col4Width);

            $('.column5Value').width(col5Width);
            $('#col5').width(col5Width);

            $('.column6Value').width(col6Width);
            $('#col6').width(col6Width);

            $('.column7Value').width(col7Width);
            $('#col7').width(col7Width);

这使列的大小正确并紧密排列，但是从我无法完全弄清楚的地方应用了额外的填充或边距(可能是 Bootstrap )，这使得标题和列不对齐。我希望是这样的:

var savedCSS = $('#table').css(); 并像 $('#table').css(savedCSS) 一样检索它p>

Answer 1

您可以一个一个地保存您感兴趣的单个样式，然后稍后使用您使用的 jQuery("selector").css("styleName") 方法重新应用它们提到过，但我认为没有一种简单的方法可以同时完成所有这些工作。这并非不可能，但不会非常有效，并且一旦元素处于新位置后，实际上可能不会给您想要的结果。

经过讨论，我们发现大小问题并不是真正由样式引起的，而是由于计算 width 的元素引起的。

当元素在页面流中正常定位时，它使用其最近定位的父元素的宽度，然后去掉边距以找到子内容的宽度。

当元素从页面流中移除时，它的宽度就独立于父元素。因此，为了让两者匹配，记录父元素的宽度而不是元素本身，并设置宽度以匹配父元素，而不是试图保持元素的宽度。