不在 dom 中的克隆元素的 getComputedStyle答案

【问题标题】：getComputedStyle of a clone element which is not in the dom不在 dom 中的克隆元素的 getComputedStyle
【发布时间】：2013-09-13 09:57:27
【问题描述】：

我有一个类似的html页面；

<div id="cloneDiv">
    <h1>
        <a href="">ASUS Vivotab Smart Black Office 2013 H&S ME400C-C2-BK 10.1-Inch 64GB Tablet
            (Black)</a>
    </h1>
    <div id="fordBackgroundImage" style="display: inline-block; background-position: center center; width: 1200px;
        height: 565px; background-image: url('http://www.ford.com/ngbs-services/resources/ford/edge/2013/npcolorizer/edg13_ingotsilver.jpg');
        background-repeat: no-repeat; background-attachment: scroll; position: relative;">
        <div style="position: absolute; color: white; font-weight: bold; top: 50px; left: 100px; font-size: 50px;">
            Try new ford jeep!
        </div>
    </div>
    <p>
        <img alt="" src="http://ecx.images-amazon.com/images/I/81UsKLK%2B6LL._SX342_.jpg"
            class="border thumb0 selected" style="cursor: pointer;">
    </p>
    <p>
        <img border="0" src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/o1_slate_sm._V358729399_.jpg"
            style="width: 320px; height: 282px;">
    </p>
 </div>

我有一个 javascript 函数可以将元素转换为计算样式元素；

function MakeCssInline(elementParam) {
var domE = $(elementParam).get()[0];
var cssText = window.getComputedStyle(domE).cssText;
$(elementParam).attr("style", cssText);
// children
var items = domE.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
    var domE2 = items[i];
    var cssText2 = window.getComputedStyle(domE2).cssText;
    $(items[i]).attr("style", cssText2);
}
 };

如果我在原始元素上调用函数，它会起作用；但它改变了原始元素 html

MakeCssInline($("#cloneDiv"));

但是当我尝试在克隆元素上调用此函数时，它不起作用；

var cloneElement = $("#cloneDiv").clone();
MakeCssInline(cloneElement);

它不会将样式应用于元素，因为我没有在 body 元素中附加，既然我不想弄乱原始元素，有没有办法用 javascript 获得元素的计算样式克隆？

【问题讨论】：

由于该元素尚未添加到 DOM，因此尚未为其计算样式。但是，您也许可以获取原始元素的计算样式并将其分配给克隆的元素。
如果复制样式属性，添加到dom时应该级联一样，不需要指定这样的具体值...
@FelixKling 这是一个不错的技巧，现在已经尝试过了，谢谢！

标签： javascript jquery html css clone

【解决方案1】：

尝试将元素附加到正文，隐藏，撕掉您需要的信息，然后将其从 DOM 中删除。

【讨论】：

重复元素的计算样式将不同于原始元素的样式。即使您将其附加到原始的parentNode 而不是body，CSS 选择器通常也会根据相对于其他节点的位置来确定样式。但是即使您暂时删除了原始元素并将其替换为重复的原位，仍然存在一些页面脚本动态更改 CSS 属性以响应某些无法重现的事件的问题.

【解决方案2】：

我按照 Felix Kling 的建议编写了一个非常基本的函数；

function MakeCssInline(elementParam) {
    var cloned = $(elementParam).clone();
    $(cloned).find("script").remove();
    $(cloned).find("link").remove();
    $(cloned).find("iframe").remove();
    //
    var domE = $(elementParam).get()[0];
    var domCloned = $(cloned).get()[0];
    //
    var cssText = window.getComputedStyle(domE).cssText;
    $(cloned).attr("style", cssText);
    // children
    var items = domE.getElementsByTagName("*");
    var itemsCloned = domCloned.getElementsByTagName("*");
    for (var i = 0; i < items.length; i++) {
        var domE2 = items[i];
        var cssText2 = window.getComputedStyle(domE2).cssText;
        $(itemsCloned[i]).attr("style", cssText2);
    }
    return domCloned;
};

【讨论】：