JQuery ব্যবহার করে একটি ডিভ থেকে সিএসএস সরান

Question

আমি জিকুয়েরিতে নতুন। আমার অ্যাপে আমার নিম্নলিখিত রয়েছে:

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

আমি যখন একটি ডিভ এ ক্লিক করি তখন সেই ডিভের রঙ পরিবর্তন হয়। এই ক্লিক ফাংশনের মধ্যে আমার কিছু কাজ করতে হবে। সর্বোপরি আমি ডিভিড থেকে প্রয়োগ করা সিএসএস সরিয়ে ফেলতে চাই। আমি কীভাবে এটি JQuery এ করতে পারি?

Comments

ছেলে, তুমি কৃমির এক ক্যান খুলে ফেলেছ!

— চিমটি

Answer 1

আপনার সিএসএসের বৈশিষ্ট্যগুলিকে একটি শ্রেণিতে রাখুন, তারপরে এমন কিছু করুন:

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

তারপরে যেখানে আপনার 'অন্যান্য কার্যকারিতা' এমন কিছু করুন:

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

Comments

@Aruna: - কিভাবে আমি একটু এখন ভয় করছি করছে আপনি উপাদান শৈলী নির্বাণ? আপনার সিএসএস যদি স্টাইলশিটে / ব্লকে না থাকে তবে এটি সিএসএস নয়।

— অন্নাকাটা

@ নানকাতা: অবশ্যই এটি ... <div style="xxx"/>এখনও সিএসএস ... এটি করার খুব ভাল উপায় নয়, তবে এটি কার্যকর does

— এমপেন

অ্যানিমেশন বা জটিল রেন্ডারিংয়ের জন্য আপনি ফ্লাইতে কিছু পরিবর্তন করে যেখানে এই উত্তরটি সমস্ত ক্ষেত্রে সহায়তা করে না। প্রশ্নটি সিএসএসকে কীভাবে সংগঠিত করতে হবে তা নয়, তবে সিএসএস বিকল্পটি কীভাবে সরিয়ে ফেলা হবে তা নিয়ে নয়।

— FMaz008

@ FMaz008 - অ্যানিমেশন এবং জটিল রেন্ডারিং তিনি যা চেয়েছিলেন তা ছাড়িয়ে যায়। প্রশ্নটি পড়ুন: "... সর্বোপরি আমি প্রয়োগ করা সিএসএস ডিভ থেকে মুছে ফেলতে চাই"। তাই তিনি ব্যবহার করতে পারে addClassবা removeClassবা removeAttr('style')@ টরেস এর উত্তরে হিসাবে।

— karim79

যদিও নীচে আমার পক্ষে কাজ করেছে আমিও অনুভব করি যে এটি আমার সেরা স্টাইলিংগুলিতে বা কমপক্ষে যতটা সম্ভব আমার স্টাইলশীটগুলিতে করা পছন্দ করে তাই এটিই সেরা সমাধান seeing আমি এইভাবে জিনিসগুলি শেষ করেছি।

— লন্ডনগুই

Answer 2

আপনি এই জাতীয় উপাদানগুলিতে থাকা নির্দিষ্ট সিএসএস সরিয়ে ফেলতে পারেন:

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

যদিও আমি করিমের সাথে একমত হই যে আপনার সম্ভবত সিএসএস ক্লাস ব্যবহার করা উচিত।

Comments

এটি ব্যাকগ্রাউন্ড-রঙ এবং ফন্ট-ওজনের জন্য পূর্ববর্তী সেটিংস সরিয়ে ফেলবে

— ফিলিপ লেয়েবার্ট

সিডিএস ক্লাসের মাধ্যমে প্রয়োগ করা শৈলীগুলি সরানোর জন্য উপাদানগুলিতে সরাসরি ইনলাইন প্রয়োগ করা শৈলীগুলি সরানোর জন্য @ ডেভ আইআই 7 তে সুন্দরভাবে কাজ করেছেন ।

— এরিক

সমস্যাটি হ'ল '' এ ব্যাকগ্রাউন্ড সেট করার সময়, আই 7 খুশিতে সমস্ত বিভিন্ন ব্যাকগ্রাউন্ড- * বৈশিষ্ট্যের জন্য ডিফল্ট যুক্ত করে। যার অর্থ আপনার যদি ব্যাকগ্রাউন্ড- * সম্পত্তি অন্যথায় সেট করা থাকে (উদাহরণস্বরূপ ক্লাসের মাধ্যমে) তারা এ দ্বারা সাফ হয়ে যায়। আমাদের পণ্যটিতে আমাকে এই নির্দিষ্ট সমস্যাটি মোকাবেলা করতে হয়েছিল।

— ডেভ ভ্যান ডেন এয়েণ্ডে

আমার জন্য ভাল কাজ করুন যদিও স্টাইলশীটে স্টাইলিং করা উচিত বলে আমি অ্যাডক্লাসটি ব্যবহার করে শেষ করেছি। আমি ব্যক্তিগতভাবে জিনিসগুলিকে সংগঠিত রাখতে পছন্দ করি।

— লন্ডনগুই

মনে রাখবেন যে এটি $ উপাদান.css ('শীর্ষ', ''); এর মতো নয়, যা শৈলীটি সরিয়ে দেয় না। আপনাকে অবশ্যই একটি অবজেক্টে পাস করতে হবে: $ উপাদান.css (top 'শীর্ষ:' '});

— টম ম্যাককেঞ্জি

Answer 3

আপনি জাভাস্ক্রিপ্টের সাহায্যে ম্যানুয়ালি যুক্ত সমস্ত ইনলাইন শৈলী মুছতে চাইলে আপনি অপসারণ পদ্ধতি ব্যবহার করতে পারেন। সিএসএস ক্লাস ব্যবহার করা ভাল তবে আপনি কখনই জানেন না।

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

Comments

অতিরিক্ত ক্লাস, +1 ব্যবহার করার চেয়ে এটি আরও ভাল সমাধান।

— o15a3d4l11s2

উত্তম উত্তর - jQuery এর .css('style-name', 'style-value')ফাংশনটি কোনও উপাদানকে ইনলাইন স্টাইল যুক্ত করে - এবং ফ্লাইতে শৈলী আপডেট করার জন্য এটি প্রয়োজনীয় is একটি টানা / ড্রপ স্ক্রিপ্টটি একেবারে অবস্থানযুক্ত উপাদানের স্টাইল topএবং leftশৈলগুলিকে পরিবর্তন করতে পারে - এমন উদাহরণ যেখানে ক্লাসগুলি ব্যবহার করা অবৈধ।

— leepowers

এটি অন্যান্য বিকল্পগুলির চেয়ে ভাল কারণ আমাদের কেবল স্টাইল অপসারণ করতে হবে।

— গৌতমলাকুম

এখানে যোগ করার মতো ক্রোম এটিকে সঠিকভাবে পরিচালনা করবে না কারণ এখানে একটি নিরাপদ বিকল্প `অ্যাটর ('স্টাইল', '') ব্যবহার করবে।

— অ্যান্ড্রু

দুর্দান্ত উত্তর। যতক্ষণ আপনি নিশ্চিত হয়ে থাকেন যে কেবলমাত্র একবার ইনলাইন সিএসএস রয়েছে যা আপনি একবারে এটি কার্যকর করার পরে সরিয়ে ফেলতে চান (যেমন প্রায়শই অ্যানিমেশনগুলির ক্ষেত্রে হয়), তারপরে এই পথ চলতে হবে।

— জ্যাকব স্ট্যাম

Answer 4

আপনি এইভাবে ইনলাইন বৈশিষ্ট্যগুলি মুছে ফেলতে পারেন:

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

উদাহরণ স্বরূপ:

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

এটি মূলত উপরে উল্লিখিত হয়েছে, এবং এটি অবশ্যই কৌশলটি করে।

বিটিডব্লিউ, উদাহরণস্বরূপ এটি দরকারী যখন অ্যানিমেশন পরে আপনার যখন কোনও রাজ্য সাফ করা দরকার। অবশ্যই আমি এটি মোকাবেলায় আধা ডজন ক্লাস লিখতে পারি, বা আমি আমার বেস ক্লাসটি ব্যবহার করতে পারি এবং # আইডি কিছু গণিত করতে পারি এবং অ্যানিমেশনটি প্রযোজ্য ইনলাইন শৈলীটি সাফ করতে পারি।

$(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 বৈশিষ্ট্য মুছে ফেলতে পারি?

— সাইমন আর্নল্ড

আমি প্রথমটি চেষ্টা করেছি এবং এটি সুন্দরভাবে কাজ করে! সমস্ত নবজাতকের জন্য যারা হয়ত জানেন না: সিএসএস ('অ্যাট্রি', '') সেই অ্যাটর অপসারণ করার মতো নয়!

— বেনামে

Answer 6

একটি নোট হিসাবে, সম্পত্তির উপর নির্ভর করে আপনি এটিকে অটোতে সেট করতে সক্ষম হতে পারেন।

Answer 7

ডিফল্ট মান সেট করুন, উদাহরণস্বরূপ:

$ (এটি) .সিএসএস ("উচ্চতা", "অটো");

বা অন্যান্য সিএসএস বৈশিষ্ট্যগুলির ক্ষেত্রে

$ (এটি) .css ("উচ্চতা", "উত্তরাধিকারী");

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 ডোমে উপাদানগুলিতে হেরফের করে, শৈলীগুলি "শৈলী" বৈশিষ্ট্যে উপাদানটিতে লেখা হয় যেন আপনি শৈলীতে ইনলাইন লিখছেন writing আপনাকে যা করতে হবে তা হল সেই বৈশিষ্ট্যটি সাফ করা এবং আইটেমটি তার মূল শৈলীতে পুনরায় সেট করা উচিত

আশাকরি এটা সাহায্য করবে

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

আমি ব্যবহারকারীর দ্বিতীয় সমাধানটি 147767 ব্যবহার করেছি

তবে এখানে একটি টাইপো রয়েছে is এটা করা উচিত

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

<= 0 নয়

আমি এই শর্তটিও এর জন্য পরিবর্তন করেছি:

! curCssName.match (নতুন RegExp (cssName + "(-। +) ?:"), "মাইল")

যেহেতু কখনও কখনও আমরা jQuery এর উপরে একটি CSS সম্পত্তি যুক্ত করি এবং এটি বিভিন্ন ব্রাউজারের জন্য আলাদাভাবে যুক্ত করা হয় (অর্থাত্ সীমানা সম্পত্তি ফায়ারফক্সের জন্য "বর্ডার", এবং আইইয়ের জন্য "সীমানা শীর্ষ", "সীমান্তের নীচে" ইত্যাদি যুক্ত হবে) )।

Answer 12

কোনও ক্লাস যুক্ত করার আগে আপনার পরীক্ষা করা উচিত এটি ইতিমধ্যে .asClass () পদ্ধতি সহ ক্লাস করেছে কিনা

আপনার নির্দিষ্ট প্রশ্নের জন্য। আপনার জিনিসগুলি ক্যাসকেডিং স্টাইলশিটে রাখা উচিত। এটি নকশা এবং কার্যকারিতা পৃথক করার সেরা অনুশীলন।

সুতরাং শ্রেণীর নাম যুক্ত করার এবং অপসারণের প্রস্তাবিত সমাধানটি সেরা অনুশীলন।

তবে আপনি যখন উপাদানগুলি চালিত করছেন তখন কীভাবে তারা রেন্ডার হয় তা নিয়ন্ত্রণ করবেন না। রিমুভআউটআর ('স্টাইল') সমস্ত ইনলাইন শৈলী সরানোর সেরা উপায়।

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/