प्रत्येक एप्लिकेशन या वेबपेज के लिए टेक्स्ट सबसे महत्वपूर्ण और सबसे अधिक दिखाई देने वाली संपत्ति है, टेक्स्ट के उपयोग के बिना निर्माता अपने विचारों को पूरी तरह से व्यक्त नहीं कर सकता है या जानकारी ठीक से नहीं दे सकता है। इसकी आवश्यकता और महत्व के कारण, इसकी स्टाइलिंग भी अधिकांश डेवलपर्स के लिए एक बुरा सपना बन जाती है। स्थिर पाठ के लिए, सीएसएस गुण और इसकी रूपरेखा बहुत मदद करती है लेकिन फिर भी, एक ऐसी संपत्ति की आवश्यकता होती है जिसे गतिशील रूप से शैली पर लागू किया जा सके। सौभाग्य से, यह संपत्ति जावास्क्रिप्ट द्वारा प्रदान की गई है जिसका नाम ' पाठसजावट ”।
यह ब्लॉग textDecoration प्रॉपर्टी के माध्यम से HTML तत्व पर शैलियों को लागू करने की प्रक्रिया प्रदान करेगा।
HTML DOM स्टाइल टेक्स्टडेकोरेशन प्रॉपर्टी का उपयोग करके शैलियाँ कैसे लागू करें?
डोम शैली ' पाठसजावट 'संपत्ति मूल रूप से जोड़ने जैसी स्टाइलिंग करती है' अंडरलाइन', 'ओवरलाइन', 'लाइन-थ्रू', और 'ब्लिंक'। 'एक चयनित तत्व पर। यह संपत्ति जब 'पर सेट की जाती है कोई नहीं 'डिफ़ॉल्ट स्टाइल को हटा देता है जो एंकर टैग की तरह उस तत्व पर लागू होता है।
वाक्य - विन्यास
DOM स्टाइल textDecoration प्रॉपर्टी के लिए सिंटैक्स है:
eleObj. शैली . पाठसजावट = 'कोई नहीं|ओवरलाइन|ब्लिंक|अंडरलाइन|प्रारंभिक|लाइन-थ्रू|इनहेरिट'
उन मानों के बारे में त्वरित विचार प्राप्त करने के लिए नीचे दी गई तालिका पर जाएँ जिन्हें '' को सौंपा जा सकता है पाठसजावट ' संपत्ति:
| कीमत | स्पष्टीकरण |
|---|---|
| कोई नहीं | सभी पूर्व-परिभाषित स्टाइल को हटाते हुए टेक्स्ट को सादे प्रारूप में परिवर्तित करें; यह डिफ़ॉल्ट है. |
| ओवरलाइन | चयनित पाठ के ऊपर या शीर्ष पर एक पंक्ति सम्मिलित करता है। |
| झपकी | टेक्स्ट को ब्लिंक कर देता है लेकिन यह सभी वेब ब्राउज़र द्वारा समर्थित नहीं है। |
| रेखांकन | यह पंक्ति को चयनित टेक्स्ट के नीचे या नीचे रखता है। |
| प्रारंभिक | लागू संपत्ति को उसके डिफ़ॉल्ट मान पर सेट करें जो हमारे मामले में कोई नहीं है। |
| के माध्यम से रेखा | लाइन को टेक्स्ट के केंद्र में यानी टेक्स्ट के बीच में रखें। |
| तुम्हें विरासत मिली | मूल या मूल तत्व पर लागू संपत्ति विरासत में मिलती है। |
अब, आइए '' के प्रत्येक मान के लिए कार्यान्वयन प्रक्रिया और पाठ पर इसके प्रभाव पर एक नज़र डालें पाठसजावट ' संपत्ति।
उदाहरण 1: 'टेक्स्टडेकोरेशन = कोई नहीं' संपत्ति
का व्यावहारिक कार्यान्वयन पाठसजावट 'संपत्ति का मूल्य है' कोई नहीं नीचे दिए गए कोड में समझाया जाएगा:
< शरीर >
< केंद्र >
< एच 1 शैली = 'रंग: कैडेटब्लू;' > लिनक्स < / एच 1 >
< बटन क्लिक पर = 'लागू करनेवाला()' > एप्लायर < / बटन >
< पी > जब textDecoration प्रॉपर्टी का मान किसी पर सेट नहीं किया जाता है: < / पी >
< h3 पहचान = 'उदाहरण' शैली = 'पाठ-सजावट: ओवरलाइन;' > लक्षित तत्व < / h3 >
< / केंद्र >
< लिखी हुई कहानी >
फ़ंक्शन एप्लायर() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / लिखी हुई कहानी >
< / शरीर >
उपर्युक्त कोड की व्याख्या:
- सबसे पहले, '< का उपयोग करें बटन >' एक बटन बनाने के लिए टैग करें और उसे ' का ईवेंट श्रोता निर्दिष्ट करें क्लिक पर ”। यह ईवेंट श्रोता 'नाम का एक जावास्क्रिप्ट फ़ंक्शन ट्रिगर करता है एप्लायर ”।
- अगला, एक लक्षित तत्व बनाएं ” h3 'और इसे' की एक अद्वितीय आईडी निर्दिष्ट करें उदाहरण ”। इसके अलावा, सीएसएस लागू करें' text-decoration 'इसकी संपत्ति का मूल्य' है ओवरलाइन 'की मदद से' शैली ' गुण।
- अब, ' दर्ज करें एप्लायर ()' फ़ंक्शन बॉडी और उसकी आईडी के माध्यम से लक्षित तत्व का चयन करें' उदाहरण 'और शैली संलग्न करें' पाठसजावट ' संपत्ति।
- उसके बाद, संपत्ति को 'का मान निर्दिष्ट करें' कोई नहीं 'तत्व पर पहले से लागू किसी भी पाठ-सजावट स्टाइल को हटाने के लिए।
उपरोक्त कोड के निष्पादन के बाद वेबपेज का दृश्य:
आउटपुट दिखाता है कि लक्षित तत्व पर लागू प्री-स्टाइलिंग को 'का मान निर्दिष्ट करके हटा दिया जाता है' कोई नहीं ”।
उदाहरण 2: 'टेक्स्टडेकोरेशन = प्रारंभिक' संपत्ति
नीचे दिया गया कोड स्निपेट 'के कार्यान्वयन को दर्शाता है' पाठसजावट 'संपत्ति जब' का मूल्य प्रारंभिक 'इसे सौंपा गया है:
< लिखी हुई कहानी >समारोह एप्लायर ( ) {
दस्तावेज़। getElementById ( 'उदाहरण' ) . शैली . पाठसजावट = 'प्रारंभिक' ;
}
लिखी हुई कहानी >
उपरोक्त कोड के संकलन के बाद उत्पन्न आउटपुट नीचे दिखाया गया है:
उपरोक्त आउटपुट से पता चलता है कि टेक्स्ट सजावट का मान उसके डिफ़ॉल्ट मान पर सेट है जो कि ' कोई नहीं ” और इसलिए सभी प्री-स्टाइलिंग को पूर्ववत कर दिया गया है।
उदाहरण 3: 'टेक्स्टडेकोरेशन = ओवरलाइन' संपत्ति
नीचे दिया गया कोड 'के व्यावहारिक कार्यान्वयन को दर्शाता है' पाठसजावट 'संपत्ति जब' का मूल्य ओवरलाइन 'इसे प्रदान किया गया है:
< शरीर >< केंद्र >
< एच 1 शैली = 'रंग: कैडेटब्लू;' > लिनक्स < / एच 1 >
< बटन क्लिक पर = 'लागू करनेवाला()' > एप्लायर < / बटन >
< पी > जब textDecoration प्रॉपर्टी का मान ओवरलाइन पर सेट किया जाता है: < / पी >
< h3 पहचान = 'उदाहरण' > लक्षित तत्व < / h3 >
< / केंद्र >
< लिखी हुई कहानी >
फ़ंक्शन एप्लायर() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / लिखी हुई कहानी >
< / शरीर >
उपरोक्त कोड की व्याख्या नीचे दी गई है:
- पहले ' बटन' और 'h3 'तत्व उसी तरीके से बनाया गया है और सीएसएस संपत्ति जो पर लागू होती है 'h3' तत्व अब हटा दिया गया है.
- अगला, 'के अंदर एप्लायर 'फ़ंक्शन में लक्षित तत्व का चयन किया जाता है और' पाठसजावट 'संपत्ति का मूल्य है' ओवरलाइन 'तत्व को सौंपा गया है।
उपरोक्त कोड के निष्पादन के बाद आउटपुट नीचे प्रदर्शित है:
आउटपुट 'का प्रभाव दिखाता है टेक्स्टडेकोरेशन = ओवरलाइन पाठ के ऊपर संपत्ति।
उदाहरण 4: 'टेक्स्टडेकोरेशन = रेखांकित करें' संपत्ति
पाठ का व्यावहारिक कार्यान्वयन जब ' का मान रेखांकन ' को ' को सौंपा गया है पाठसजावट 'संपत्ति नीचे बताई गई है:
< लिखी हुई कहानी >समारोह एप्लायर ( ) {
दस्तावेज़। getElementById ( 'उदाहरण' ) . शैली . पाठसजावट = 'रेखांकित करें' ;
}
लिखी हुई कहानी >
संकलन के बाद, आउटपुट इस तरह दिखता है:
आउटपुट दिखाता है कि लाइन टेक्स्ट के नीचे जोड़ी गई है।
उदाहरण 5: 'टेक्स्टडेकोरेशन = लाइन-थ्रू' संपत्ति
का दृश्य कार्यान्वयन पाठसजावट 'की कीमत वाली संपत्ति' के माध्यम से रेखा 'नीचे दिखाया गया है:
< लिखी हुई कहानी >समारोह एप्लायर ( ) {
दस्तावेज़। getElementById ( 'उदाहरण' ) . शैली . पाठसजावट = 'के माध्यम से रेखा' ;
}
लिखी हुई कहानी >
उपरोक्त कोड के लिए उत्पन्न आउटपुट नीचे प्रदर्शित किया गया है:
आउटपुट 'द्वारा किया गया प्रभाव दिखाता है के माध्यम से रेखा लक्षित तत्व पाठ के ऊपर।
निष्कर्ष
HTML DOM शैली' पाठसजावट संपत्ति विशेष रूप से पाठ तत्वों पर गतिशील स्टाइलिंग करने के लिए जावास्क्रिप्ट के माध्यम से HTML तत्वों की स्टाइलिंग से संबंधित है। इसे अनेक मान निर्दिष्ट किए जा सकते हैं' पाठसजावट स्टाइल के विभिन्न रूपों को निष्पादित करने के लिए। ये मूल्य हैं ' कोई नहीं', 'ओवरलाइन', 'अंडरलाइन', 'लाइन-थ्रू', 'प्रारंभिक', 'ब्लिंक', और 'इनहेरिट' ”। इस ब्लॉग ने उस प्रक्रिया को सफलतापूर्वक समझाया है जिसके द्वारा डेवलपर textDecoration प्रॉपर्टी का उपयोग करके शैलियों को लागू कर सकता है।