जावास्क्रिप्ट का उपयोग करके सीएसएस संपत्ति कैसे निकालें?

Question

क्या जावास्क्रिप्ट का उपयोग करके किसी तत्व की सीएसएस संपत्ति को निकालना संभव है? जैसे मेरे पास है div.style.zoom = 1.2, अब मैं जावास्क्रिप्ट के माध्यम से ज़ूम संपत्ति को निकालना चाहता हूं?

Comments

कृपया स्पष्ट करें: क्या आप किसी तत्व से किसी वर्ग को हटाने की कोशिश कर रहे हैं, या किसी तत्व से विशेषता?

— Jan Hančič

इसके लिए क्षमा करें, एक वर्ग नहीं, एक तत्व के लिए विशेषता।

— बैठ गया

नीचे क्यों? यह एक सभ्य पर्याप्त सवाल नहीं है?

— रोलैंड बोमन

हाय बैठ गया, मुझे समझ नहीं आ रहा है - आपने नौसिखियों के उत्तर को "स्वीकृत उत्तर" के रूप में क्यों चिह्नित किया? मेरा मतलब है, उसका समाधान उस स्थिति में अच्छा है जब आप वर्ग द्वारा तत्व ढूंढना चाहते हैं, लेकिन आपके प्रश्न में सब कुछ इंगित करता है कि आप स्थानीय शैली की संपत्ति को स्थापित करने के प्रभाव को बदलने के लिए एक विधि की तलाश कर रहे थे। निश्चित रूप से, मेरा जवाब समस्या को बेहतर ढंग से बताता है? शायद मैंने आपके सवाल को गलत समझा?

— रॉलेंड बुमैन

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

— व्हाइटनीलैंड

Answer 1

आपके पास दो विकल्प हैं:

विकल्प 1:

आप removeProperty विधि का उपयोग कर सकते हैं । यह एक तत्व से एक शैली को हटा देगा।

el.style.removeProperty('zoom');

विकल्प 2:

आप इसे डिफ़ॉल्ट मान पर सेट कर सकते हैं:

el.style.zoom = "";

प्रभावी ज़ूम अब स्टाइलशीट (लिंक और शैली टैग के माध्यम से) में निर्धारित परिभाषाओं से जो भी होगा। तो यह सिंटैक्स केवल इस तत्व की स्थानीय शैली को संशोधित करेगा।

Comments

... उपयोगकर्ता सीएसएस और ब्राउज़र डिफ़ॉल्ट शैलियों के साथ।

— क्वेंटिन

मैंने ओपी को समझा कि वे इसे बनाना चाहते थे जैसे कि उन्होंने तत्व की शैली संपत्ति को सेट नहीं किया है, जो कि आपने प्रदान किया है। मैंने el.style.removeProperty ('ज़ूम') का उपयोग करने की कोशिश की; (या 'भरें', वास्तव में, मेरे मामले में) जो IE में एक ही काम करने लगता है, और अन्य ब्राउज़रों द्वारा अनदेखा किया जाता है। किसी कारण से मुझे यह जानकर आश्चर्य हुआ कि इसे एक रिक्त स्ट्रिंग पर सेट करने का समान प्रभाव पड़ता है और यह ब्राउज़र के सभी (हाल के संस्करणों) पर काम करता है।

— शाविस

क्या यह व्यवहार एक मानक में कहीं भी निर्दिष्ट है? मैं इसे नहीं पा सकता:

— ओलिवर जोसेफ ऐश

@OliverJosephAsh हाँ यह प्रलेखित है, नीचे देखें इस उत्तर के नीचे stackoverflow.com/a/7901886/700206

— व्हाइटनीलैंड

Answer 2

removeProperty एक तत्व से एक शैली को हटा देगा।

उदाहरण:

div.style.removeProperty ( 'ज़ूम');

MDN प्रलेखन पृष्ठ:
CSSStyleDeclaration.removeProperty

Answer 3

div.style.removeProperty('zoom');

Answer 4

आप स्टाइलशीट ऑब्जेक्ट का उपयोग कर सकते हैं:

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

कैविएट # 1: आपको अपनी स्टाइलशीट के सूचकांक और अपने नियम के सूचकांक को जानना होगा।

कैविट # 2: इस ऑब्जेक्ट को ब्राउज़रों द्वारा असंगत रूप से लागू किया गया है; एक में काम क्या दूसरों में काम नहीं कर सकता है।

Comments

यह वास्तव में भंगुर लगता है। जब भी आपके सूचकांक बदलते हैं तो क्या यह नहीं टूटेगा?

— केसी रोडरमोर

हां। ठीक ऐसा ही # 1 कहता है।

— james.garriss

मेरा Chrome 26 के पास CSSStyleRule.prototype.removeProperty= (वास्तव CSSStyleRuleमें कोई विधि नहीं है। =

— 22

CSSStyleSheet.prototype.removeRuleबचाव के लिए।

— रुडी

@Rudie, है ना CSSStyleSheet.prototype.deleteRule?

— रोका

Answer 5

element.style.height = null;

उत्पादन:

<div style="height:100px;"> 
// results: 
<div style="">

Comments

ऐसा लगता है कि null में स्टाइल सेट करना IE11 में काम नहीं करता है।

— मैक्सिम डब्ल्यू

किसी को IEब्राउज़र की देखभाल क्यों करनी चाहिए ? मैं जानबूझकर उन्हें पहले से ही सालों से नजरअंदाज कर रहा हूं।

— टोडुआ

Answer 6

आप उन सभी तत्वों को खोजने की कोशिश कर सकते हैं जिनमें यह वर्ग है और "ज़ूम" संपत्ति को "कुछ भी नहीं" पर सेट करना है।

यदि आप jQuery जावास्क्रिप्ट पुस्तकालय का उपयोग कर रहे हैं, तो आप इसके साथ कर सकते हैं $(".the_required_class").css("zoom","")

संपादित करें: इस कथन को हटा दिया गया क्योंकि यह सच नहीं था, जैसा कि एक टिप्पणी और अन्य उत्तरों में बताया गया है कि यह वास्तव में 2010 से संभव है।

गलत: जावास्क्रिप्ट से स्टाइलशीट को संशोधित करने का कोई आम तरीका नहीं है।

Comments

हाँ वहाँ है। कार्यक्रमशैली को संशोधित करना हालांकि जावास्क्रिप्ट हार्ड नहीं है। यह महान प्रदर्शन के साथ क्रॉस-ब्राउज़र का काम करता है और तत्वों की एक गुच्छा पर एक ही संपत्ति को बदलते समय वास्तव में समझ में आता है। जैसा कि जनवरी 2010 का मामला था। यहाँ एक संक्षिप्त उदाहरण है: stackoverflow.com/questions/14927706/…

— Clox

Clox: स्टाइलशीट को जोड़ना जो कुछ संपत्ति को प्रोग्रामेटिक रूप से ओवरराइड करता है - बेशक! पहले से लोड किए गए लोगों को संशोधित करना - इसके बारे में नहीं सुना।

— भोजियों

क्या इसका मतलब Attr () के बजाय css () होना है। या यह शायद IE में attr () है?

— एलेक्स कीमिथ जुएल

यह वास्तव में होना चाहिए css, नहीं attr, आप सही हैं।

— नौनिहालों

Answer 7

आप यह कहकर jQuery में भी कर सकते हैं $(selector).css("zoom", "")

Answer 8

इस चाल को करना चाहिए - इनलाइन शैली को ज़ूम के लिए सामान्य करने के लिए सेट करना:

$ ('div')। Attr ("शैली", "ज़ूम: सामान्य;");

Comments

सवाल यह था कि किसी शैली को कैसे हटाया जाए, यह उत्तर मौजूद सभी शैलियों को नष्ट कर देगा और उन्हें एक नई प्रविष्टि के साथ बदल देगा।

— व्हाइटनीलैंड

Answer 9

वास्तव में, यदि आप पहले से ही संपत्ति जानते हैं, तो यह ऐसा करेगा ...

उदाहरण के लिए:

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    } 

ध्यान दें कि यह केवल इनलाइन शैलियों के लिए काम करता है ... न कि ऐसी शैलियों के बारे में जिन्हें आपने कक्षा के माध्यम से निर्दिष्ट किया है या ऐसा कुछ ...

अन्य ध्यान दें: आपको उस बयान के बदले में कुछ पात्रों से बचना पड़ सकता है, लेकिन आपको यह विचार मिलता है।

Answer 10

एक तत्व के लिए सभी वर्गों को बदलने के लिए:

document.getElementById("ElementID").className = "CssClass";

एक तत्व में एक अतिरिक्त वर्ग जोड़ने के लिए:

document.getElementById("ElementID").className += " CssClass";

यह जाँचने के लिए कि क्या एक वर्ग पहले से ही किसी तत्व पर लागू है:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )

Comments

सवाल यह था कि किसी शैली को कैसे हटाया जाए, इस जवाब का उससे कोई लेना-देना नहीं है।

— व्हाइटनीलैंड