jQuery jQuery सीएसएस शैली परिभाषा बदल सकते हैं? (प्रत्येक तत्व की अलग-अलग नहीं सीएसएस)

Question

मैं कह रहा jQuery ऐसे

td { padding: 0.2em 1.2em } 

बदलते

td { padding: 0.32em 2em } 

के रूप में किसी भी सीएसएस परिभाषा को बदल सकते हैं कोई भी दस्तावेज़ नहीं देखा है लेकिन या तो एक पूरी शैली बदलना होगा चादर, या प्रत्येक तत्व की कक्षा बदलें, या प्रत्येक तत्व के सीएसएस बदलें।

शैली परिभाषा को बदल रहा है?

Answer 1

स्टाइलशीट्स के लिए डीओएम एक्सेस है, लेकिन यह उन चीजों में से एक है जिन्हें हम टालना चाहते हैं क्योंकि आईई को संगतता क्रुफ्ट का भार चाहिए।

एक बेहतर तरीका आम तौर पर किया जाएगा परोक्ष रूप से परिवर्तन को गति प्रदान करने, एक पूर्वज पर एक साधारण वर्ग परिवर्तन का उपयोग किया:

td { padding: 0.2em 1.2em } 
body.changed td { padding: 0.32em 2em } 

अब बस $('body').addClass('changed') और सभी td रों अद्यतन।

तुम सच में स्टाइलशीट frob चाहिए:

var sheet= document.styleSheets[0]; 
var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; // IE compatibility 
rules[0].style.padding= '0.32em 2em'; 

मतलब यह है कि प्रश्न में td नियम पहले स्टाइलशीट में पहला नियम है। यदि नहीं, तो आपको सही चयनकर्ता टेक्स्ट की तलाश में नियमों को पुन: स्थापित करके इसे खोजना पड़ सकता है। या सिर्फ अंत करने के लिए एक नया नियम जोड़ने, पुराने एक अधिभावी:

if ('insertRule' in sheet) 
    sheet.insertRule('td { padding: 0.32em 2em }', rules.length); 
else // IE compatibility 
    sheet.addRule('td', 'padding: 0.32em 2em', rules.length); 

jQuery ही आप स्टाइलशीट का उपयोग करने की किसी भी विशेष उपकरण नहीं देता है, लेकिन यह संभव है वहाँ वाले प्लग इन हो सकता है कर रहे हैं।

Answer 2

नहीं, यह सिर्फ इस तरह ... यकीन नहीं किसी भी बेहतर तरीके से काम नहीं करता है कि :) की तुलना में यह समझाने के लिए

jQuery तत्वों पर काम करने के लिए डिजाइन किया गया था ... यदि आप के लिए यह कर रहे हैं परीक्षण, क्रोम कंसोल के फायरबग विकल्प हैं हालांकि।

कुछ आप सकता है करते हैं, एक सर्वर साइड उत्पन्न स्टाइलशीट है उदाहरण के लिए कैसे ThemeRoller यह, और jQuery (या वेनिला जे एस) गतिशील रूप से कहते हैं करता है कि आपके शीर्षक में <link>, कुछ की तरह:

<link rel="stylesheet" href="myCSS.php?tdPad=.32|2" type="text/css" /> 

यदि यह अंतिम लिंक था, तो यह पहले परिभाषित शैली को ओवरराइड कर देगा ... वास्तव में यह बिल्कुल थीमरोलर कैसे काम करता है।

Answer 3

मैं एक समस्या में भाग गया जहां मुझे चौड़ाई नहीं पता था कि मैं एक वर्ग चाहता था जब तक कि इसे लोड नहीं किया गया और ऐसा किया।

<script> 
$(function() { 
    calcWidth = CalculateWidth(); 

    $('body').prepend('<style> .dynamicWidth { width: ' + calcWidth + 'px } </style>'); 
} 
</script> 

नोट: यह कोई बात हो सकती है, जहां आप (, आगे जोड़ते संलग्न) स्क्रिप्ट डाल कैसे आप 'झरना' के लिए नियमों को चाहते हैं पर निर्भर करता है।

Answer 4

$('head').append('<style id="customCSS">td { padding: 0.32em 2em }</style>'); 

मैंने एक आईडी विशेषता जोड़ा ताकि आप इसे लक्षित और हटा सकें जब आप अब उस परिवर्तन को लागू नहीं करना चाहते हैं।

$('#customCSS').remove();