2010-04-26 17 views
9

मेरे पास दो फ्रेम वाले पृष्ठ हैं, और मुझे एक तत्व और उसके सभी घोंसले तत्वों की प्रतिलिपि बनाने की आवश्यकता है (यह एक उल/li है पेड़) और सबसे महत्वपूर्ण बात यह है कि यह एक फ्रेम से दूसरे फ्रेम तक है।मैं एक डीओएम तत्व से अन्य शैली गुणों को प्रोग्रामेटिक रूप से कॉपी कर सकता हूं

मुझे आंतरिक सामग्री को असाइन करने के माध्यम से सभी सामग्री मिलती है, और मैं dest.style.left और dest.style.top के साथ दूसरे फ्रेम में नया तत्व स्थापित करने में सक्षम हूं और यह काम करता है। लेकिन मैं सभी शैली की जानकारी प्राप्त करने की कोशिश कर रहा हूं और कुछ भी नहीं हो रहा है।

मैं प्रत्येक स्रोत तत्व के लिए अंतिम शैली प्राप्त करने के लिए getComputedStyle का उपयोग कर रहा हूं क्योंकि मैं प्रत्येक नोड के माध्यम से लूप करता हूं और उन्हें गंतव्य नोडलिस्ट में उसी स्थिति में असाइन करता हूं और शैली को दृष्टि से बदलने के लिए कुछ भी नहीं होता है।

मुझे क्या याद आ रही है?

var completeStyle = window.getComputedStyle(element1, null).cssText; 
element2.style.cssText = completeStyle; 

दुर्भाग्य से, getComputedStyle इंटरनेट एक्सप्लोरर, जो currentStyle बजाय का उपयोग करता है के द्वारा समर्थित नहीं है:

+0

लगभग एक डुप्लिकेट [जावास्क्रिप्ट के साथ एक तत्व (और इसकी शैली) को डुप्लिकेट करना] (http://stackoverflow.com/questions/1848445/duplicating-an-element-and-its-style-with-javascript)। –

+0

'ऑब्जेक्ट.साइन (el.style, otherEl.style)' – caub

उत्तर

6

क्या आपने cloneNode को आजमाया है? यह तत्व की प्रतिलिपि बना सकता है और उसके सभी बच्चों में एक झुकाव गिर गया है। http://www.w3schools.com/dom/met_element_clonenode.asp

+0

यदि आपको इसे स्ट्रिंग के रूप में स्थानांतरित करने की आवश्यकता है, तो आप JSON का उपयोग करने में सक्षम होना चाहिए। यह वास्तव में गणना की गई शैली को स्थानांतरित करने की कोशिश करने से छोटा हो सकता है, और यदि दोनों संदर्भों में उपयुक्त सीएसएस उपलब्ध है तो इसे ठीक से काम करना चाहिए। –

+3

+1 - आईडी क्लोनर्स ('#myFrame {} ') या अन्य चयनकर्ताओं द्वारा शैलियों को लागू किए जाने पर शैलियों को लागू नहीं किया गया था, तो' क्लोन नोड 'पूरी शैली की प्रतिलिपि नहीं बना सकता है, जो नए नोड पर लागू नहीं होगा, लेकिन अगर यह मामला नहीं है तो यह सही होना चाहिए यहाँ। –

+0

दस्तावेज़ के उस हिस्से को याद किया होगा, मुझे ऐसा करने की उम्मीद थी, लेकिन यह काम नहीं कर रहा है, जिससे मुझे विश्वास है कि कुछ और गलत है। मुझे लगता है कि एक फ्रेम से दूसरे फ्रेम में जाने के बारे में कुछ समझ है। क्या क्लोन आवश्यक रूप से नोड्स माता-पिता से विरासत में प्राप्त शैलियों को उठाएगा जिसे मैं क्लोन कर रहा हूं? – stu

18

getComputedStyle के साथ, आप cssText संपत्ति जो एक सीएसएस स्ट्रिंग में पूरे गणना शैली लायेगा मिल सकती है। दुर्भाग्य से दुर्भाग्यपूर्ण तथ्य यह है कि currentStylecssText के लिए शून्य लौटाता है, इसलिए उसी विधि को IE पर लागू नहीं किया जा सकता है। मैं कोशिश करते हैं और आप के लिए कुछ पता लगा लेंगे, अगर किसी ने मुझे यह करने के लिए धड़कता है :-)


मैं इसके बारे में सोचा है और आप एक for...in कथन का उपयोग IE में ऊपर का अनुकरण कर सकते हैं:

var completeStyle = ""; 
if ("getComputedStyle" in window) 
    completeStyle = window.getComputedStyle(element1, null).cssText; 
else 
{ 
    var elStyle = element1.currentStyle; 
    for (var k in elStyle) { completeStyle += k + ":" + elStyle[k] + ";"; } 
} 

element2.style.cssText = completeStyle; 
+0

अब यह कोशिश कर रहा है क्योंकि क्लोन मेरे लिए काम नहीं करता है। getcomputedstyle() को मेरे ट्रैवल का पालन करने वाले किसी भी व्यक्ति के लिए दो पैराम्स की आवश्यकता है ... जल्द ही अपडेट हो जाएगा। – stu

+2

मुझे पागल होना चाहिए। मैंने पूरे दिन इस के खिलाफ अपने सिर को टक्कर लगी है और कहीं भी नहीं मिला है।मैं फायरबग के साथ कदम बढ़ा रहा हूं और मेरे पास एक रिकर्सिव फ़ंक्शन है जो प्रत्येक नोडचिल्ड का पालन करता है और getcomputedstyle को कॉल करता है और फायरबग इसमें गणना की जाती है जिसमें 162 कुंजी के साथ एक गणना की गई है। लेकिन कोई मूल्य सेटिंग नहीं है, इसलिए जब मैं कॉल करता हूं .cssText मुझे कुछ भी नहीं मिलता है। लेकिन जब मैं फ़ायरबग के साथ तत्वों को देखता हूं, तो आईटी सभी कंप्यूटस्टाइल जानकारी प्राप्त कर सकता है। GAAAAAAAAAHHHHHHH !!!!!!!!!! – stu

+0

शायद मुझे कुछ याद आ रही है। क्या getcomputedstyle() सीएसएस शैली टैग में परिभाषित चीजों की उपेक्षा करता है? यही वह जगह है जहां से मैं जिस शैली की प्रतिलिपि बनाने की कोशिश कर रहा हूं उसे परिभाषित किया गया है। मैं खुद को टैग में शैली डालने की कोशिश करने जा रहा हूं ... – stu

0

वैसे मैंने स्रोत टैग से [गणना] शैली की जानकारी प्राप्त करने की कोशिश करने का मूल प्रयास छोड़ दिया, मुझे इसे कभी काम नहीं मिला।

बजाय मैं इस की कोशिश की, और यह काम किया है ...

सबसे पहले मैं स्रोत फ्रेम से -style- टैग को पकड़ा, तो मैं यह दूसरे के -head- टैग के अंत करने के लिए appendChilded फ्रेम। जो इस उपयोगी साबित हुआ ... How do you copy an inline style element in IE?

तो मैं कुछ नेस्टेड div तत्वों बनाया है, प्रत्येक एक आईडी या शैली वर्ग मुझे लगता है कि पदानुक्रम पहली फ्रेम से मिलान किया तो वारिस करने के लिए आवश्यक है। फिर मैंने सोर्स फ्रेम के टैग के आंतरिक एचटीएमएल को घुमाया जिसे मैं प्रतिलिपि बनाना चाहता था और फिर आखिरकार इसे दूसरे फ्रेम के शरीर में लगाया, और जादुई रूप से, यह सब काम किया।

var topd = doc.createElement('div'); // make a div that we can attach all our styles to so they'll be inherited 
topd.id = 'menuanchorelement'; 
// shove our desired tag in the middle of a few nested elements that have all the classes we need to inherit... 
topd.innerHTML = "<div id='multi-level'><ul class='menu'>" + dh.innerHTML + "</ul></div>"; 

doc.body.appendChild (topd); // voila

संबंधित मुद्दे

 संबंधित मुद्दे