JQuery के साथ :before CSS चयनकर्ताओं की डायनामिक चौड़ाई संशोधन

वेब विकास में, आप ऐसे परिदृश्यों का सामना कर सकते हैं जहां गतिशील सामग्री को स्टाइल में समायोजन की आवश्यकता होती है छद्म तत्वों जैसे :before. एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी, JQuery के साथ इसे प्राप्त करने के लिए, इन चरणों का पालन करें:

सबसे पहले, निम्नलिखित सीएसएस नियमों को मानें:

.column:before{
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column{
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

अब, JQuery का उपयोग करके :before छद्म-तत्व की चौड़ाई संपत्ति सेट करने के लिए, आप दस्तावेज़ के शीर्ष पर एक नया शैली तत्व जोड़ सकते हैं:

$('head').append('');

यह एक नया CSS जोड़ता है नियम जो प्रारंभिक चौड़ाई को ओवरराइड करता है। लिंक]

हालांकि यह विधि :before छद्म-तत्वों के लिए विशिष्ट नहीं है, यह आपको उनकी चौड़ाई या अन्य सीएसएस गुणों को गतिशील रूप से संशोधित करने की अनुमति देती है।