मौजूदा साइटों से HTML + CSS + JS को चुनिंदा रूप से कॉपी करने के लिए उपकरण [बंद]


403

अधिकांश वेब डेवलपर्स की तरह, मैं कभी-कभी वेबसाइटों के स्रोत को देखना पसंद करता हूं कि उनका मार्कअप कैसे बनाया जाता है। फायरबग और क्रोम डेवलपर टूल जैसे उपकरण कोड का निरीक्षण करना आसान बनाते हैं, लेकिन अगर मैं एक पृथक अनुभाग को कॉपी करना चाहता हूं और स्थानीय स्तर पर इसके साथ खेलना चाहता हूं, तो सभी व्यक्तिगत तत्वों और उनके संबंधित सीएसएस को कॉपी करना एक दर्द होगा। और शायद पूरे स्रोत को बचाने और असंबंधित कोड को काटने के लिए बस उतना ही काम।

यह बहुत अच्छा होगा अगर मैं फायरबग में एक नोड को राइट-क्लिक कर सकता हूं और "नोड के लिए सीएसएस सहेजें" विकल्प हो सकता है। क्या ऐसा कोई उपकरण मौजूद है? क्या इस सुविधा को जोड़ने के लिए फायरबग या क्रोम डेवलपर टूल्स का विस्तार करना संभव है?


4
बस जोड़ना चाहते थे (जैसा कि आप वर्णन करते हैं, एक उपकरण नहीं है, इसलिए उत्तर नहीं दे रहे हैं), यदि आप क्रोम का उपयोग करते हैं तो आप एक तत्व का चयन कर सकते हैं और सीएसएस अनुभाग में दाईं ओर "कम्प्यूटेड स्टाइल" देख सकते हैं। आप पूरी सूची को एक शैली में कॉपी-पेस्ट कर पाएंगे। यह आपके द्वारा इच्छित टूल से एक अतिरिक्त चरण है, लेकिन आपको वह सीएसएस देता है जिसकी आप तलाश कर रहे हैं।
riv_rec

1
आपके प्रश्न का पूर्ण उत्तर नहीं है, लेकिन "एलीमेंट्स" टैब पर क्रोम देव टूल्स में F2 चुने हुए DOM एलिमेंट को खोल देगा और इनलाइन एडिटिंग के लिए सबट्री करेगा (और अगर आप चाहें तो कॉपी कर सकते हैं)।
10gistic

क्रोम का एक बहुत ही रोचक विस्तार "सभी संसाधन सहेजें" है। इसे स्थापित करें और फिर क्रोम देव टूल टैब के "संसाधन सेवर" पर जाएं और इसे डाउनलोड करें!
dimeros

जवाबों:


580

SnappySnippet

इस उपकरण को बनाने के लिए आखिरकार मुझे कुछ समय मिला। आप Github से SnappySnippet स्थापित कर सकते हैं । यह निर्दिष्ट (अंतिम निरीक्षण) DOM नोड से आसान HTML + CSS निकासी की अनुमति देता है। इसके अतिरिक्त, आप अपना कोड सीधे CodePen या JSFiddle को भेज सकते हैं। का आनंद लें!

SnappySnippet Chrome एक्सटेंशन

अन्य सुविधाओं

  • HTML को साफ करता है (अनावश्यक विशेषताओं को हटाकर, इंडेंटेशन को ठीक करता है)
  • सीएसएस का अनुकूलन इसे पठनीय बनाने के लिए करता है
  • पूरी तरह से विन्यास योग्य (सभी फ़िल्टर बंद किए जा सकते हैं)
  • ::beforeऔर ::afterछद्म तत्वों के साथ काम करता है
  • बूटस्ट्रैप और फ्लैट-यूआई परियोजनाओं के लिए अच्छा यूआई धन्यवाद

कोड

SnappySnippet खुला स्रोत है, और आप GitHub पर कोड पा सकते हैं ।

कार्यान्वयन

चूंकि मैंने इसे बनाते समय काफी कुछ सीखा है, इसलिए मैंने कुछ ऐसी समस्याओं को साझा करने का फैसला किया है जो मैंने अनुभव की हैं और उनके समाधान, शायद किसी को यह दिलचस्प लगेगा।

पहला प्रयास - getMatchedCSSRules ()

सबसे पहले मैंने मूल CSS नियमों (वेबसाइट पर CSS फाइलों से आने वाले) को पुनः प्राप्त करने की कोशिश की है। आश्चर्यजनक रूप से, यह बहुत ही सरल धन्यवाद हैwindow.getMatchedCSSRules() , हालांकि, यह अच्छी तरह से काम नहीं करता है। समस्या यह थी कि हम केवल HTML और CSS चयनकर्ताओं का एक हिस्सा ले रहे थे, जो पूरे दस्तावेज़ के संदर्भ में मेल खा रहे थे, जो अब HTML स्निपेट के संदर्भ में मेल नहीं खा रहे थे। चूंकि पार्सिंग और संशोधन करने वाले चयनकर्ता एक अच्छे विचार की तरह नहीं थे, इसलिए मैंने इस प्रयास को छोड़ दिया।

दूसरा प्रयास - getComputedStyle ()

उसके बाद, मैंने कुछ ऐसा शुरू किया है जो @CollectiveCognition ने सुझाया है - getComputedStyle()। हालाँकि, मैं वास्तव में सभी शैलियों को रेखांकित करने के बजाय CSS फॉर्म HTML को अलग करना चाहता था।

समस्या 1 - सीएसएस को HTML से अलग करना

यहाँ समाधान बहुत सुंदर नहीं था लेकिन काफी सीधा था। मैंने चयनित सबट्री में सभी नोड्स को आईडी असाइन किया है और उचित सीएसएस नियम बनाने के लिए उस आईडी का उपयोग किया है।

समस्या 2 - डिफ़ॉल्ट मान के साथ गुण हटाना

नोड्स को आईडी असाइन करना अच्छी तरह से काम करता है, हालांकि मुझे पता चला कि मेरे प्रत्येक सीएसएस नियमों में ~ 300 गुण हैं जो पूरे सीएसएस को अपठनीय बनाते हैं।
बाहर है कि बारी-बारी से getComputedStyle()रिटर्न हर संभव सीएसएस गुणों और मूल्यों को देखते हुए तत्व के लिए गणना की। उनमें से कुछ जहां खाली हैं, कुछ में ब्राउज़र डिफ़ॉल्ट मान थे। डिफ़ॉल्ट मान निकालने के लिए मुझे उन्हें पहले ब्राउज़र से प्राप्त करना था (और प्रत्येक टैग में अलग-अलग डिफ़ॉल्ट मान हैं)। समाधान यह था कि वेबसाइट से आने वाले तत्व की शैलियों की तुलना उसी तत्व से की जाए जो खाली में डाला गया हो <iframe>। यहाँ तर्क यह था कि एक खाली में कोई स्टाइल शीट नहीं हैं <iframe>, इसलिए मैंने जो भी तत्व जोड़ा है उसमें केवल डिफ़ॉल्ट ब्राउज़र शैलियाँ थीं। इस तरह मैं उन अधिकांश संपत्तियों से छुटकारा पाने में सक्षम था जो महत्वहीन थीं।

समस्या 3 - केवल आशुलिपि गुणों को रखते हुए

अगली बात जो मैंने देखी है वह यह थी कि शॉर्टहैंड समतुल्य गुणों को अनावश्यक रूप से प्रिंट किया गया था (उदाहरण के लिए border: solid black 1pxऔर फिर border-color: black;, border-width: 1pxइत्यादि)।
इसे हल करने के लिए मैंने बस उन संपत्तियों की एक सूची बनाई है जिनके पास शॉर्टहैंड समतुल्य हैं और उन्हें परिणामों से फ़िल्टर किया गया है।

समस्या 4 - उपसर्ग गुण हटाना

प्रत्येक नियम में प्रॉपर्टी की संख्या काफी पिछले ऑपरेशन के बाद कम था, लेकिन मैं पाया है कि मैं का एक बहुत कुछ था Sill -webkit-उपसर्ग के गुण है कि मैं कभी नहीं सुना है ( -webkit-app-region? -webkit-text-emphasis-position?)।
मैं सोच रहा था कि क्या मुझे इनमें से कोई भी गुण रखना चाहिए क्योंकि उनमें से कुछ उपयोगी ( -webkit-transform-origin, -webkit-perspective-originआदि) लग रहे थे । मुझे यह पता नहीं चला है कि यह कैसे सत्यापित करना है, हालांकि, और जब से मुझे पता था कि ज्यादातर समय ये गुण सिर्फ कचरा हैं, मैंने उन सभी को हटाने का फैसला किया।

समस्या 5 - समान सीएसएस नियमों का संयोजन

अगली समस्या जो मैंने देखी है वह थी कि एक ही सीएसएस नियम बार-बार दोहराया जाता है (उदाहरण के लिए प्रत्येक <li>एक ही शैली के साथ सीएसएस उत्पादन में एक ही नियम था)।
यह सिर्फ एक-दूसरे के साथ नियमों की तुलना करने और उन्हें संयोजित करने का मामला था जिसमें गुणों और मूल्यों का एक ही सेट था। नतीजतन, बजाय #LI_1{...}, #LI_2{...}मुझे मिल गया #LI_1, #LI_2 {...}

समस्या 6 - HTML की इंडेंटेशन को साफ करना और ठीक करना

चूंकि मैं परिणाम से खुश था, इसलिए मैं HTML में चला गया। यह एक गड़बड़ की तरह लग रहा था, ज्यादातर क्योंकि outerHTMLसंपत्ति इसे स्वरूपित रखती है ठीक उसी तरह जैसे कि यह सर्वर से वापस आ गया था। जरूरत
से लिया गया केवल HTML कोड outerHTMLएक साधारण कोड सुधार था। चूंकि यह हर आईडीई में कुछ उपलब्ध है, मुझे यकीन था कि एक जावास्क्रिप्ट पुस्तकालय है जो वास्तव में ऐसा करता है। और यह पता चला है कि मैं सही था (jquery- साफ) । क्या अधिक है, मुझे अनावश्यक विशेषताओं को अतिरिक्त ( style, data-ng-repeatआदि) को हटा दिया गया है ।

समस्या 7 - फ़िल्टर सीएसएस को तोड़ना

चूंकि एक मौका है कि कुछ परिस्थितियों में ऊपर उल्लिखित फ़िल्टर स्निपेट में सीएसएस को तोड़ सकते हैं, मैंने उन सभी को वैकल्पिक बना दिया है। आप उन्हें सेटिंग मेनू से अक्षम कर सकते हैं ।


@KonradDzwinel, मैं एक पृष्ठ के भीतर इस प्रोग्राम को करने के लिए एक रास्ता खोज रहा हूं (एक विशिष्ट DOM उपप्रकार को प्रिंट करने के लिए, बस इसे एक नई विंडो में कॉपी करें और print())। जेएस को एक कॉल करने योग्य फ़ंक्शन के रूप में इसे बनाने के लिए (आपके या आपके रेपो को देखने के लिए किसी के लिए) कितना मुश्किल होगा?
हैशबोर्न

@Hashbrown मुझे मेल करें और हम विवरण पर बात कर सकते हैं - मुझे लगता है कि यह बहुत सरल होगा।
कोनराड डिजविनेल

@KonradDzwinel इस प्रयास के लिए बहुत बहुत धन्यवाद, लेकिन क्या होगा अगर मैं php फ़ंक्शन 'file_get_contents ($ url)' के साथ नोड तत्व प्राप्त करना चाहता हूं, तो क्या कोई समाधान है, यहां मेरा पोस्ट है: stackflowflow.com/questions/21419857/ …
यासीन एडौरी

अच्छा कार्य! लेकिन क्या जेएस कोड को शामिल करना संभव है जो तत्व पर कार्य करता है?
t31321

1
@KonradDzwinel पहले ही किसी ने मुझे पीटा है: github.com/kdzwinel/SnappySnippet/issues/37
डेविड कीवेनी

52

मैंने मूल रूप से यह प्रश्न पूछा था कि मैं एक क्रोम (या फ़ायरफ़ॉक्स) समाधान की तलाश कर रहा था, लेकिन मैंने इंटरनेट एक्सप्लोरर डेवलपर टूल में इस सुविधा को ठोकर मार दी। बहुत ज्यादा मैं क्या देख रहा हूँ (जावास्क्रिप्ट को छोड़कर)

स्टाइल के साथ तत्व स्रोत

परिणाम:

शैली परिणाम के साथ तत्व स्रोत


5
IE11 भी काम करता है। लेकिन विकल्प सीधे तत्व पर सीधे क्लिक से सुलभ है।
रोडोल्फो जॉर्ज नेमेर नोगीरा

15
वाह, अंत में एक उदाहरण जहां IE devtools बेहतर हैं!
dmnd

7
सबसे अच्छा समाधान मैंने इस पृष्ठ में सूचीबद्ध सभी अन्य लोगों की तुलना करने की कोशिश की है। मूल CSS नामों को रखते समय उत्पन्न CSS + HTML सुपर क्लीन है, जिसका अर्थ है कि HTML मूल के समान है।
xoofx

पवित्र बकवास जो भयानक है। @Xoofx के निष्कर्षों की पुष्टि कर सकते हैं कि HTML मार्कअप समान है लेकिन आगे टिप्पणी करना चाहता है कि यह कंकाल माता-पिता को लपेटने वाले तत्वों को सही मायने में शैली से मेल खाने के लिए आवश्यक है।
डैनियल सोकोलोव्स्की

इसका इस्तेमाल किया। सही ढंग से काम करने के लिए तेज़ स्निपेट नहीं मिल सका (जटिल html & css)। मैं विश्वास नहीं कर सकता यह वास्तव में काम किया है। और बस लोगों को पता है, मैं इस सुविधा को किनारे पर सिर्फ एक्सप्लोरर में नहीं देखा था।
वाटसन

51

वेबकिट ब्राउज़र (फ़ायरबग के बारे में निश्चित नहीं) आपको आसानी से किसी तत्व के HTML को कॉपी करने की अनुमति देता है, इसलिए यह प्रक्रिया का एक हिस्सा है।

किसी तत्व के लिए HTML की प्रतिलिपि बनाने से पहले (जावास्क्रिप्ट कंसोल में) चलाने से, दिए गए मूल तत्व के लिए सभी संगणक शैलियों को स्थानांतरित कर दिया जाएगा, साथ ही साथ सभी बच्चे के तत्वों को इनलाइन शैली विशेषता में जो तब HTML के भाग के रूप में उपलब्ध होगा ।

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

यह कुल हैक है और आपके पास "जंक" सीएसएस विशेषताओं के माध्यम से उतारा जा सकता है, लेकिन कम से कम आपकी शुरुआत होनी चाहिए।


3
महान जवाब, लेकिन ... वास्तविक उत्तर से असंबंधित, के लिए व्हाट्स ... लूप सिंटैक्स? यह मेरे लिए बाधा के रूप में पढ़ता है।
स्टीव कैम्पबेल

1
यह बहुत अच्छा है, बस मूल तत्व को याद करता है। इसे भी जोड़ें: el.setAttribute ("स्टाइल", window.getComputedStyle (el) .cssappext);
करमन कर्टेज़ 11

क्रोम कंसोल में, .querySelector मेरे लिए अशक्त हो गया। इसलिए इसे निम्नलिखित में बदलें और इसने काम किया: var el = document.getElementById ("# someid"); el.setAttribute ("स्टाइल", window.getComputedStyle (el) .cssText); var els = el.getElementsByTagName ("*"); के लिए (var i = -1, l = els.length; ++ i <l;) {els [i] .setAttribute ("स्टाइल", window.getComputedStyle (els [i])। cssTextext)। }
विक्टर टैंगो

30

मैंने इस उपकरण को उसी उद्देश्य के लिए सालों पहले बनाया है:
http://www.betterprogramming.com/htmlclipper.html

आप का उपयोग करने और उस पर सुधार करने के लिए स्वागत है।


यह वही है जो मुझे अभी चाहिए। बहुत धन्यवाद ... 4 साल पहले उपलब्ध इस समाधान के बारे में सोचकर ...
fro_oo

25

यह स्क्रैपबुक नामक फायरबग प्लगिन द्वारा किया जा सकता है

आप सेटिंग में जावास्क्रिप्ट विकल्प की जांच कर सकते हैं

यहां छवि विवरण दर्ज करें

संपादित करें:

यह भी मदद कर सकता है

Firequug HTML स्क्रीन स्क्रैपिंग की प्रक्रिया में सहायता के लिए Firebug का एक विस्तार है। Firequug (फ़ायरफ़ॉक्स के लिए एक वेब डेवलपमेंट प्लगइन) का उपयोग करके वेब पेज से एक या एक से अधिक html नोड (एस) के लिए फायरक्वार्क स्वचालित रूप से सीएसएस चयनकर्ता को निकालता है। उत्पन्न सीएसएस चयनकर्ता को जानकारी निकालने के लिए स्क्रेपी जैसे html स्क्रीन स्क्रेपर्स के इनपुट के रूप में दिया जा सकता है। Firequark को html स्क्रीन स्क्रैपिंग के उपयोग के लिए css चयनकर्ता की शक्ति प्राप्त करने के लिए बनाया गया है।


स्क्रैपबुक बहुत अच्छा लगता है - दुर्भाग्य से दोनों नवीनतम संस्करण (1.4.5) और समीक्षाओं में अनुशंसित एक पिछला (1.4.3) OSX / FF3.6.1 पर मेरे लिए काम नहीं करेगा। किसी को भी यह काम कर रहा है?
पेटीपेटर

काश मैं और अधिक सटीक रूप से सहेजने के लिए एक नोड का चयन कर सकता, लेकिन यह बहुत अच्छी तरह से काम किया
केनवरनर ने

1
यह थोड़े सहायक है, लेकिन एक पृष्ठ तत्व को आवश्यक सीएसएस के साथ दूसरे पृष्ठ पर ले जाने की मेरी आवश्यकता को हल नहीं किया है। स्क्रैपबुक सभी पृष्ठों के css की प्रतिलिपि बनाता है, चाहे पृष्ठ के चयनित भाग के लिए इसकी आवश्यकता हो या न हो, और यह css का कोई पुनर्लेखन नहीं करता है जो अन्य पृष्ठ के css से टकराने वाली शैलियों से बचने में मदद करेगा।
mc0e

13

दिव्या फ्लोरेंटिन सरदाना के htmlclipper का एक अद्यतन संस्करण है

आधुनिक संवर्द्धन के साथ: ES5, HTML5, scoped CSS ...

आप प्रोग्राम के साथ एक स्टाइलिश div निकाल सकते हैं:

var html = require("divclip").bySel(".article-body");
console.log(html);

का आनंद लें।


महान एक! एक जादू की तरह काम करता है! मैंने कुछ संशोधन किया ताकि यह क्रोम में चल सके। बस 'निर्यात' को हटा दें और 'निर्भरता' की आवश्यकता है, और उन्हें क्रोम स्निपेट पर कॉपी करें। फिर कंसोल में टाइप कर सकते हैं, copy(divclip.bySel('.topbar'))जो संसाधित आउटपुट को क्लिपबोर्ड पर कॉपी करेगा! ;)
केन

एक त्रुटि है: shellprod.msocdn.com/16.00.1692.002/en-US/JSC/O365ShellG2Plus.js:21 'DOMMindow' पर 'पोस्टमासेज' को अंजाम देने में विफल: लक्षित मूल (' portal.office.com' ) प्रदान करता है। प्राप्तकर्ता विंडो की उत्पत्ति ('null') से मेल नहीं खाता।
स्लाव

10

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

यह सीएसएस कोड को बहुत साफ, जैसे प्रदान करता है

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

वाह, यह माइक्रोसॉफ्ट एज में पूरी तरह से काम करता है। Htmlclipper और snappysnippet की कोशिश की, लेकिन जिन तत्वों को मैं कॉपी करने की कोशिश कर रहा हूं उनकी जवाबदेही को बरकरार रखने के मुद्दे थे।
मैट

यह आश्चर्यजनक है, पूरी तरह से अच्छी तरह से काम करता है।
मई को snit80

5

हाल ही में मैंने निरीक्षण तत्व, HTML और एक पृष्ठ से केवल प्रासंगिक सीएसएस और मीडिया प्रश्नों की प्रतिलिपि बनाने के लिए एक क्रोम एक्सटेंशन "eXtract Snippet" बनाया। ध्यान दें कि यह आपको वास्तविक प्रासंगिक सीएसएस देगा

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en


मुझे पसंद है कि यह कैसे सभी चयनकर्ताओं को मूल के रूप में रखता है।
हजामी

1
यह स्निपेट स्निप क्रोम एक्सटेंशन की तुलना कैसे करता है?
पाटोशी at ト

3

इसके लिए एक एकल समाधान के साथ एक उपकरण जिससे मैं अनजान हूं, लेकिन आप फायरबग और वेब डेवलपर एक्सटेंशन का उपयोग कर सकते हैं उसी समय ।

जिस HTML अनुभाग की आपको ज़रूरत है (निरीक्षण तत्व) और वेब डेवलपर को कॉपी करने के लिए फायरबग का उपयोग करें, यह देखने के लिए कि कौन सा सीएसएस किसी तत्व से जुड़ा है (कॉलिंग वेब डेवलपर "देखें शैली की जानकारी" - यह फायरबग के "निरीक्षण तत्व" की तरह काम करता है, लेकिन html दिखाने के बजाय मार्कअप यह संबंधित मार्क्‍स को उस मार्कअप के साथ दिखाता है)।

यह बिल्कुल वैसा नहीं है जैसा आप चाहते हैं (सब कुछ के लिए एक क्लिक करें), लेकिन यह बहुत करीब है, और कम से कम सहज ज्ञान युक्त है।

वेब डेवलपर एक्सटेंशन से 'दृश्य शैली की जानकारी' परिणाम


यह वही है जो मैं करता हूं, लेकिन इसमें प्रत्येक तत्व के लिए सीएसएस को मैन्युअल रूप से कॉपी करना शामिल है। मुझे लगता है कि ओपी आदर्श रूप से ऐसा कुछ चाहता है जो सीएसएस शैलियों को एक तत्व और सभी नेस्टेड तत्वों को प्रभावित कर कॉपी कर सकता है - इसे एक में कॉपी करना जैसे आप HTML के लिए करते हैं।
मुहद्

3

मुझे फायरबग पर भी इस सुविधा की आवश्यकता है! तब तक, वर्गों को हटाने और सीएसएस को इनलाइन शैलियों में बदलने के लिए एक और दृष्टिकोण इस ऑनलाइन सेवा का उपयोग करना है।


3

http://clipboardjs.com यह और काफी अच्छी तरह से करता है। यद्यपि आपके द्वारा कॉपी किए गए संस्करण की मूल रूप से अपेक्षा की जा रही है ताकि आप इसके साथ खेल सकें और सीख सकें, यह यथार्थवादी नहीं हो सकता है।


2

बस उस भाग को कॉपी करें जिसे आप वेबपृष्ठ से चाहते हैं और इसे wysiwyg संपादक में पेस्ट करें। संपादक टूलबार पर "स्रोत" बटन पर क्लिक करके HTML स्रोत की जांच करें।

जब मैं एक Drupal साइट पर काम कर रहा था तो मुझे यह सबसे आसान तरीका लगा। मैं wysiwyg CKeditor का उपयोग करता हूं।


2
jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
    }).join("\n");
    return style;
}
});

उपयोग:$("#login_wrapper").getStyles()


मेरी जरूरत के लिए, यह काफी आशाजनक है, क्योंकि यह getComputedStyle की सीमाओं से बचा जाता है। मैं सिर्फ एक जावास्क्रिप्ट दोपहर का बहुत अधिक यकीन है कि कैसे यह css के वास्तविक पाठ प्राप्त करने के लिए उपयोग करने के लिए सुनिश्चित हो।
mc0e

मैंने jQueryइसके बजाय उपयोग करने के लिए उपयोग बदल दिया है $, जो मुझे थोड़ा सा रास्ता देता है, लेकिन अब मुझे SecurityError: The operation is insecure. कोई संकेत मिलता है ?
mc0e

0

मैंने ड्रैगबल बुकमार्क के रूप में शीर्ष मतदान के उत्तर को अनुकूलित किया है ।

बस इस पृष्ठ पर जाएँ और "भागो jQuery कोड" बटन को अपने बुकमार्क बार पर खींचें।


1
एक त्रुटि देता है: त्रुटि: SyntaxError: असंगत स्ट्रिंग शाब्दिक
Barney

@ बार्नी: उसका मतलब है, आपको उत्तर को वहां कॉपी करना चाहिए और उसमें से एक स्निपेट बनाना चाहिए। यह जवाब नहीं है, लेकिन मैं इसे एक जवाब के बजाय एक टिप्पणी करने का सुझाव देता हूं
मो ह्रद ए

0

एक फ़ायरफ़ॉक्स प्लगइन है है जो पूरे पृष्ठ के HTML, सीएसएस आदि को बचाता है। लेकिन मैंने ऐसा नहीं देखा है जो आंशिक बचत करता है।

मुझे याद है कि IE 5.5 में आप क्या देख रहे थे;)


ऊप्स! हमें वह पेज नहीं मिल रहा है।
हमजा ज़फर

0

मैं यहाँ उत्तर के रूप में वर्णित सभी साधनों से गुजरा। लेकिन वे दोहराया गंदे HTML सीएसएस सुंदर चेहरे के साथ आप पर घूर रहे थे। वे तुम्हें जेएस नहीं देते।

मैं क्या करूं:

  1. पहले मैं उन विज्ञापनों को फ़िल्टर करता हूँ जिनकी पृष्ठ पर आवश्यकता नहीं होती है
  2. फिर, संसाधनों को जोड़ने के साथ पूरा वेबपेज सहेजें।
  3. अनावश्यक HTML, CSS और JS निकालें
  4. संसाधनों को एक-एक करके सावधानीपूर्वक हटाते रहें।
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.