मैं टेक्स्ट नोड की कथित स्टाइल कैसे प्राप्त करूं?

window.getComputedStyle() विधि केवल तत्व नोड स्वीकार करता है। क्या शैली को विश्वसनीय रूप से प्राप्त करने का कोई तरीका है जो टेक्स्ट नोड के दृश्य प्रस्तुतिकरण को निर्धारित करता है?मैं टेक्स्ट नोड की कथित स्टाइल कैसे प्राप्त करूं?

मुझे एहसास है कि नोड्स में style विशेषताएँ नहीं हो सकती हैं, लेकिन वे निश्चित रूप से स्टाइल हैं, क्योंकि वे मूल तत्व की शैलियों का उत्तराधिकारी हैं। क्या वहां, शायद, पर एक तरीका है जो मूल तत्व से सभी गणना की गई शैलियों को प्राप्त करता है जो पाठ नोड के दृश्य प्रतिनिधित्व से प्रासंगिक हैं?

ध्यान दें कि एक span में नोड लपेटकर सवाल से बाहर है: इस सीएसएस नियम को प्रभावित करती है इस तरह के span:nth-child या span + span, आदि

स्रोत

2015-06-21 sbichenko

के बजाय आप का उपयोग कर सकते हैं, क्योंकि इसमें पूर्व परिभाषित शैलियों नहीं होंगे ... – dandavis

@ डांडविस यह तत्व को बदलने से रोकने के लिए तत्व को रोकता नहीं है। उदाहरण के लिए ': nth-child' चयनकर्ता टूटा हो सकता है। – sbichenko

अच्छी तरह से, कोई आसान/सही तरीका नहीं है, या अब तक इसका सुझाव दिया जाएगा। मुझे लगता है कि आपको जो चाहिए वह सबसे अच्छा अनुमान देता है। मुझे देखने को याद नहीं है, और कुछ बड़े पुस्तकालयों को देखकर नहीं मिला, एक टैग: कक्षा के बिना एक 'एनएच-चाइल्ड' सामने या बोल्ट ... मुझे लगता है कि विवादों का मौका मिनट और अर्द्ध- पता। उदाहरण के लिए, अस्थायी रूप से माप के लिए को अस्थायी रूप से लागू करने से कुछ एमएस से अधिक के लिए ट्रैश किए जाने से दिखने लगेगा, और आप सामने एक अतिरिक्त नोड डाल सकते हैं फिर फ़िल्टर/पहचान 'माता-पिता *: nth-child' नियमों की तुलना करें ... – dandavis

मैं इसे स्वयं आज़मा दूंगा।

मूल तत्व पर window.getComputedStyle() का उपयोग करें और टैग नाम और शैली की जानकारी स्टोर करें।
संग्रहीत टैग नाम के साथ एक नया तत्व बनाएं और style विशेषता के माध्यम से शैलियों को असाइन करें।
एक बच्चा <foo> तत्व जोड़ें (सख्ती से बोलना, यह टैग नाम का होना चाहिए जिसका वर्तमान सीएसएस नियमों में उल्लेख नहीं है, ताकि वे इसे प्रभावित न करें)।
दस्तावेज़ (वेबकिट-विशिष्ट) के <head> पर पैरेंट तत्व संलग्न करें।
बच्चे तत्व पर window.getComputedStyle() का उपयोग करें।
inlinedisplay संपत्ति के मूल्य के रूप में सेट करें (जैसा कि टेक्स्ट नोड हमेशा इनलाइन होते हैं)।

कोड स्निपेट के परिणाम नोट करें। color लाल है, margin-left शून्य है, बाएं मार्जिन वाले माता-पिता होने के बावजूद, और width (और height भी) auto है।

var source = document.querySelector('.bar'); 
 
var sourceStyle = window.getComputedStyle(source); 
 
var sourceTag = source.tagName; 
 
var clone = document.createElement(sourceTag); 
 
var child = document.createElement('foo'); 
 
var head = document.querySelector('head'); 
 

 
child.innerHTML = 1; 
 
child.setAttribute('style', 'display: inline;'); 
 
clone.appendChild(child); 
 
clone.setAttribute('style', sourceStyle.cssText); 
 
head.appendChild(clone); 
 
alert(window.getComputedStyle(source).marginLeft); // 100px 
 
alert(window.getComputedStyle(child).color); // rgb(255, 0, 0); 
 
alert(window.getComputedStyle(child).marginLeft); // 0px 
 
alert(window.getComputedStyle(child).width); // auto

.bar { 
 
    color: red; 
 
    margin-left: 100px 
 
    }

<html> 
 
    <head> 
 
    <title>An example</title> 
 
    </head> 
 
    <body> 
 
    <div class="bar"> 
 
     foo 
 
    </div> 
 
    </body> 
 
</html>

स्रोत

2015-06-21 13:06:25 sbichenko

तो पाठ नोड केवल में नोड के रूप में एक तत्व, आप का उपयोग अपने parentNode पर कर सकते हैं।

हालांकि, निम्नलिखित पर विचार:

div {border: 1px solid black;}

<div>This <em>is</em> a <strong>test</strong></div>

आप यह नहीं कह सकते हैं कि "यह" और "एक" प्रत्येक एक सीमा है। क्या यह कहना सही होगा कि "यह" शीर्ष-नीचे-बाएं सीमाएं हैं, और "ए" में केवल शीर्ष-तल सीमाएं हैं? यह संदिग्ध है।

यदि आप स्वयं को उन शैलियों तक सीमित करते हैं जो विशेष रूप से टेक्स्ट (रंग, पृष्ठभूमि, टेक्स्टडिशन, फ़ॉन्ट इत्यादि) पर लागू होते हैं, को parentNode पर लागू करना हमेशा काम करना चाहिए।

स्रोत

2015-06-21 11:15:25

क्या केवल शैलियों को प्राप्त करने का एक विश्वसनीय तरीका है जो विशेष रूप से टेक्स्ट पर लागू होते हैं? – sbichenko

हां, बस पाठ पर लागू शैलियों को चुनें। –

बस सीएसएस मानकों के माध्यम से जाओ और इन शैलियों को चुनें? यह बहुत अविश्वसनीय लगता है, क्योंकि मानकों को बदलने के लिए प्रवण हैं, और मनुष्य गलतियां करते हैं। – sbichenko

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

स्रोत

2015-06-21 14:52:29 Rob

इस सवाल को संपादित करने का प्रयास किया गया ताकि इसे वैध बनाया जा सके। – sbichenko

मैं टेक्स्ट नोड की कथित स्टाइल कैसे प्राप्त करूं?

उत्तर

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