JQuery का उपयोग करके एक सीएसएस से सीएसएस निकालें

Question

मैं JQuery के लिए नया हूँ। मेरे ऐप में मेरे पास निम्नलिखित हैं:

$("#displayPanel div").live("click", function(){
  $(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});

जब मैं Div पर क्लिक करता हूं, तो उस Div का रंग बदल जाता है। उस क्लिक फ़ंक्शन के भीतर मेरे पास कुछ कार्य करने की क्षमताएं हैं। आखिरकार, मैं डिव से लागू सीएसएस को हटाना चाहता हूं। मैं इसे JQuery में कैसे कर सकता हूं?

Comments

लड़का, तुमने कीड़े का एक डिब्बा खोला है!

— पिंच

Answer 1

अपनी सीएसएस संपत्तियों को एक वर्ग में रखें, फिर कुछ इस तरह करें:

$("#displayPanel div").live("click", function(){
   $(this).addClass('someClass');
});

फिर जहां आपके 'अन्य कार्य' कुछ इस तरह हैं:

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

Comments

@ अरुणा: मुझे अब थोड़ा डर लग रहा है - आप तत्व पर शैली कैसे डाल रहे हैं? यदि आपका CSS स्टाइलशीट / ब्लॉक में नहीं है तो यह CSS नहीं है।

— अन्नकूट

@annakata: निश्चित रूप से यह है ... <div style="xxx"/>अभी भी सीएसएस है ... यह इसे करने का एक बहुत अच्छा तरीका नहीं है, लेकिन यह काम करता है।

— मप्र

यह उत्तर उन सभी मामलों में मदद नहीं करता है जहाँ आप एनीमेशन या जटिल प्रतिपादन के लिए मक्खी पर कुछ संशोधित करते हैं। सवाल यह नहीं था कि सीएसएस को कैसे व्यवस्थित किया जाए, लेकिन सीएसएस विकल्प को कैसे हटाया जाए।

— FMaz008

@ FMaz008 - एनिमेशन और कॉम्प्लेक्स रेंडरिंग उसके द्वारा पूछे गए सवाल से परे है। प्रश्न पढ़ें: "... आखिरकार, मैं लागू सीएसएस को डिव से निकालना चाहता हूं"। इसलिए वह @ ToRrEs के उत्तर में या के रूप में उपयोग addClassकर सकता है । removeClassremoveAttr('style')

— karim79

हालांकि नीचे मेरे लिए भी काम किया है, मुझे लगता है कि यह सबसे अच्छा समाधान था क्योंकि मैं सभी स्टाइल करना पसंद करता हूं या कम से कम अपनी स्टाइलशीट में जितना संभव हो सके। मैंने इस तरह से चीजें करना समाप्त कर दिया।

— लंदनगू

Answer 2

आप इस तरह के तत्व पर विशिष्ट css निकाल सकते हैं:

$(this).css({'background-color' : '', 'font-weight' : ''});

हालांकि मैं करीम से सहमत हूं कि आपको शायद सीएसएस कक्षाओं का उपयोग करना चाहिए।

Comments

वह पृष्ठभूमि-रंग और फ़ॉन्ट-वजन के लिए पिछली सेटिंग्स को हटा देगा

— फिलिप लेबेर्ट

@ डैव ने IE7 में खूबसूरती से काम किया, ताकि मैं सीधे एलिमेंट में इनलाइन को स्टाइल से हटा सकूं , सीएसएस क्लासेस के जरिए लागू स्टाइल को हटाने के लिए नहीं।

— यूरिक

समस्या यह है कि जब पृष्ठभूमि को '' पर सेट किया जाता है, IE7 खुशी से सभी अलग-अलग पृष्ठभूमि के गुणों को जोड़ता है- * गुण। जिसका अर्थ है कि यदि आपके पास पृष्ठभूमि है- * संपत्ति सेट अन्यथा (उदाहरण के लिए कक्षाएं), वे इसके द्वारा मंजूरी दे दी जाती हैं। हमें हमारे उत्पाद में इस विशिष्ट मुद्दे से निपटना था।

— डेव वान ने आईन्ड

मेरे लिए अच्छी तरह से काम करो, हालांकि मैं addClass का उपयोग करके समाप्त हुआ, क्योंकि स्टाइलिंग को स्टाइलशीट में किया जाना चाहिए। मैं व्यक्तिगत रूप से चीजों को व्यवस्थित रखना पसंद करता हूं।

— लंदनगुए

ध्यान दें कि यह $ element.css ('शीर्ष', '') के समान नहीं है;, जो शैली को नहीं हटाता है। आपको किसी ऑब्जेक्ट में पास होना चाहिए: $ element.css ({'top:' '});

— टॉम मैकेंजी

Answer 3

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

$("#displayPanel div").removeAttr("style")

Comments

यह अतिरिक्त कक्षा, +1 का उपयोग करने से बेहतर समाधान है।

— o15a3d4l11s2

अच्छा जवाब - jQuery का .css('style-name', 'style-value')फ़ंक्शन एक तत्व में इनलाइन शैलियों को जोड़ता है - और मक्खी पर शैलियों को अपडेट करने के लिए आवश्यक है। एक ड्रैग / ड्रॉप स्क्रिप्ट एक पूरी तरह से तैनात तत्व की शैलियों topऔर leftशैलियों को बदल सकती है - एक उदाहरण जहां कक्षाओं का उपयोग करना अव्यावहारिक है।

— लेपॉवर

यह अन्य विकल्पों की तुलना में बेहतर है क्योंकि हमें स्टाइल को हटाने की जरूरत है।

— गौतमलकुम

बस उस क्रोम को जोड़ना सही नहीं होगा जैसा कि यहाँ देखा गया है कि एक सुरक्षित विकल्प `attr ('स्टाइल', '') का उपयोग करेगा।

— एंड्रयू

बहुत बढ़िया जवाब। जब तक आप केवल इनलाइन सीएसएस को सुनिश्चित कर लेते हैं, जिसे आप एक बार हटाए जाने के बाद चाहते हैं (जैसा कि अक्सर एनिमेशन के लिए होता है), तो यह जाने का तरीका है।

— याकूब स्टैम

Answer 4

आप इनलाइन प्रॉपर्टीज को इस तरह से हटा सकते हैं:

$(selector).css({'property':'', 'property':''});

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

$(actpar).css({'top':'', 'opacity':''});

यह अनिवार्य रूप से ऊपर उल्लिखित है, और यह निश्चित रूप से चाल करता है।

BTW, यह ऐसे उदाहरणों में उपयोगी है जब आपको एनीमेशन के बाद एक स्थिति को साफ़ करने की आवश्यकता होती है। यकीन है कि मैं इससे निपटने के लिए आधा दर्जन कक्षाएं लिख सकता हूं, या मैं अपने आधार वर्ग का उपयोग कर सकता हूं और # कुछ गणित कर सकता हूं, और इनलाइन शैली को साफ कर दूंगा जो एनीमेशन लागू होता है।

$(actpar).animate({top:0, opacity:1, duration:500}, function() {
   $(this).css({'top':'', 'opacity':''});
});

Comments

बस कुछ मैं देख रहा था, इनलाइन शैलियों को हटा देता है .. धन्यवाद

— नवीन

Answer 5

jQuery.fn.extend
({
    removeCss: function(cssName) {
        return this.each(function() {
            var curDom = $(this);
            jQuery.grep(cssName.split(","),
                    function(cssToBeRemoved) {
                        curDom.css(cssToBeRemoved, '');
                    });
            return curDom;
        });
    }
});

/*example code: I prefer JQuery extend so I can use it anywhere I want to use.

$('#searchJqueryObject').removeCss('background-color');
$('#searchJqueryObject').removeCss('background-color,height,width'); //supports comma separated css names.

*/

या

//this parse style & remove style & rebuild style. I like the first one.. but anyway exploring..
jQuery.fn.extend
({
    removeCSS: function(cssName) {
        return this.each(function() {

            return $(this).attr('style',

            jQuery.grep($(this).attr('style').split(";"),
                    function(curCssName) {
                        if (curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') <= 0)
                            return curCssName;
                    }).join(";"));
        });
    }
});

Comments

क्या कोई ऐसा तरीका है जिससे हम सभी css प्रॉपर्टी को हटा सकते हैं?

— साइमन अर्नोल्ड

मैंने पहला प्रयास किया और यह खूबसूरती से काम करता है! उन सभी newbies के लिए जो शायद नहीं जानते होंगे: css ('attr', '') उस attr को हटाने के समान नहीं है!

— बेनामी

Answer 6

एक नोट के रूप में, संपत्ति के आधार पर आप इसे ऑटो पर सेट करने में सक्षम हो सकते हैं।

Answer 7

उदाहरण के लिए, डिफ़ॉल्ट मान सेट करें:

$ (यह) .css ("ऊंचाई", "ऑटो");

या अन्य सीएसएस सुविधाओं के मामले में

$ (यह) .cs ("ऊंचाई", "विरासत");

Answer 8

वास्तव में सबसे अच्छा तरीका मुझे ऐसा करने के लिए मिला है जब जटिल जॉकरी आधारित स्टाइलिंग करना है, उदाहरण के लिए, यदि आपके पास एक मोडल है जिसे आपको प्रदर्शित करने की आवश्यकता है, लेकिन इसे सही मापदंडों को प्राप्त करने के लिए पृष्ठ ऑफसेट की गणना करने की आवश्यकता है, जिन्हें इसमें जाने की आवश्यकता होगी jQuery ("x")। css ({}) फ़ंक्शन।

तो यहां शैलियों की स्थापना है, चर का उत्पादन जो विभिन्न कारकों के आधार पर गणना की गई है।

$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})

ताकि उन शैलियों को साफ किया जा सके। इसके बजाय कुछ सेट करने की तरह

$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})

सरल तरीका होगा

$(".modal").attr("style", "")

जब jquery डोम पर तत्वों को हेरफेर करती है, तो शैलियों को "शैली" विशेषता में तत्व को लिखा जाता है जैसे कि आप शैलियों को इनलाइन लिख रहे थे। आपको बस इतना करना है कि विशेषता और आइटम को अपनी मूल शैलियों पर रीसेट करना चाहिए

उम्मीद है की यह मदद करेगा

Answer 9

मेरे पास भी यही संभावना है, बस मूल्य निकालें

<script>
      $("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
      function(){$(this).css("background","");});
</script>

Answer 10

यदि आप कक्षाओं का उपयोग नहीं करना चाहते हैं (जो आपको वास्तव में करना चाहिए), केवल जो आप चाहते हैं उसे पूरा करने का एकमात्र तरीका बदलती शैलियों को सहेजकर है:

var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");

// set style
// do your thing

$(this).css("font-size",oldFontSize);
// etc...

Answer 11

मैंने user147767 के दूसरे समाधान का उपयोग किया

हालाँकि, यहाँ एक टाइपो है। यह होना चाहिए

curCssName.toUpperCase ()। indexOf (cssName.toUpperCase () + ':') <0

नहीं <= 0

मैंने इस शर्त को भी बदल दिया है:

! curCssName.match (नया RegExp (cssName + "- (-। +) ?:"), "mi")।

जैसा कि कभी-कभी हम jQuery पर एक सीएसएस संपत्ति जोड़ते हैं, और यह अलग-अलग ब्राउज़रों के लिए एक अलग तरीके से जोड़ा जाता है (यानी सीमा संपत्ति को फ़ायरफ़ॉक्स के लिए "बॉर्डर" के रूप में जोड़ा जाएगा, और IE के लिए "बॉर्डर-टॉप", "बॉर्डर-नीचे" आदि) )।

Answer 12

वर्ग जोड़ने से पहले आपको यह देखना चाहिए कि क्या पहले से ही .hasClass () पद्धति के साथ कक्षा है

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

इसलिए वर्ग नामों को जोड़ने और हटाने का प्रस्तावित समाधान सबसे अच्छा अभ्यास है।

हालांकि जब आप तत्वों में हेरफेर कर रहे हैं तो आप उन्हें नियंत्रित नहीं करते हैं कि वे कैसे प्रदान किए जाते हैं। removeAttr ('स्टाइल') सभी इनलाइन शैलियों को हटाने का सबसे अच्छा तरीका है।

Answer 13

मैंने user147767 के समाधान को संशोधित करने के लिए उपयोग करना संभव बना दिया है strings, arraysऔर objectsइनपुट के रूप में:

/*!
 * jquery.removecss.js v0.2 - https://stackoverflow.com/a/17196154/1250044
 * Remove multiple properties from an element in your DOM.
 *
 * @author Yannick Albert | #yckart
 * @param {Array|Object|String} css
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/06/19
 **/

$.fn.removeCss = function (css) {
    var properties = [];
    var is = $.type(css);

    if (is === 'array') properties = css;
    if (is === 'object') for (var rule in css) properties.push(rule);
    if (is === 'string') properties = css.replace(/,$/, '').split(',');

    return this.each(function () {
        var $this = $(this);
        $.map(properties, function (prop) {
            $this.css(prop, '');
        });
    });
};

// set some styling
$('body').css({
    color: 'white',
    border: '1px solid red',
    background: 'red'
});

// remove it again
$('body').removeCss('background');
$('body').removeCss(['border']);
$('body').removeCss({
    color: 'white'
});

http://jsfiddle.net/ARTsinn/88mJF/