2013-09-09 3 views
3

У меня есть html-страница;getComputedStyle элемента клона, который не находится в dom

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

не применять стили к элементу, потому что я не добавлять в элемент тела, , так как я не хочу возиться с оригинальным элементом, есть ли способ, чтобы получить вычисленную клон стиль элемента с JavaScript ?

+4

Поскольку элемент не был добавлен в DOM, для него еще не был рассчитан стиль. Однако вы можете получить вычисленный стиль исходного элемента и назначить его клонированному элементу. –

+0

, если вы скопируете атрибут стиля, он должен каскадировать то же самое при добавлении в dom, не нужно указывать такие конкретные значения ... – dandavis

+0

@FelixKling это хороший трюк, теперь он пробовал и работал, спасибо! –

ответ

4

Я написал очень основную функцию, которая следует за предложением Феликса Клинга;

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; 
}; 
1

Попробуйте присоединить elemnt к телу, скрытые, отрываться информацию вам нужно, а затем удалить его из DOM.

+0

Вычисленный стиль для повторяющегося элемента будет отличаться от одного для исходного элемента. Даже если вы добавили его к исходному «parentNode», а не к «body», селектора CSS часто определяют стиль, основанный на позиции относительно других узлов. Но даже если вы временно удалили исходный элемент и заменили его на дубликат * in situ, * все еще существует проблема свойств CSS, динамически изменяемых с помощью некоторых скриптов страниц в ответ на некоторые события, которые не будут воспроизведены. – 7vujy0f0hy

Смежные вопросы