.Css () ফাংশন যুক্ত করা স্টাইল আমি কীভাবে সরিয়ে ফেলতে পারি?


868

আমি jQuery দিয়ে সিএসএস পরিবর্তন করছি এবং আমি ইনপুট মানের উপর ভিত্তি করে যুক্ত করা স্টাইলিংটি সরিয়ে ফেলতে চাই:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

কিভাবে আমি এটি করতে পারব?
নোট করুন যে যখনই কোনও রঙ চয়নকারী (উদাহরণস্বরূপ যখন মাউস রঙিন চক্রের উপর দিয়ে যায়) ব্যবহার করে কোনও রঙ নির্বাচন করা হয় তখন উপরের লাইনটি চলমান।

২ য় নোট: আমি এটি করতে পারছি না css("background-color", "none")কারণ এটি সিএসএস ফাইলগুলি থেকে ডিফল্ট স্টাইলিং সরিয়ে ফেলবে ।
আমি শুধু jQuerybackground-color দ্বারা যুক্ত ইনলাইন স্টাইলটি সরাতে চাই ।



আপনার fcuntionality উপর ভিত্তি করে অ্যাডক্লাস / রিমুভ ক্লাস ভাল চেষ্টা করুন। এটি অন্য স্টাইলিংকে প্রভাবিত করবে না।
প্রভাকরণ

উত্তর:


1332

সম্পত্তিটি খালি স্ট্রিংয়ে পরিবর্তন করা কাজটি করে বলে মনে হচ্ছে:

$.css("background-color", "");

4
@ বা্যাক যখন অনুমিত "মান" মারাত্মকভাবে পুরানো হয়ে যায় এবং উন্নয়নের অনেক সময় নষ্ট করে তখন এটি লজ্জার বিষয়। পুরানো সফ্টওয়্যার ব্যবহার করা বেছে নেওয়া কর্পোরেশনের প্রতি আমার খুব সহানুভূতি রয়েছে, কেন আমি তাদের জন্য বিকাশ করতে অতিরিক্ত সময় ব্যয় করব তা আমি দেখতে পাচ্ছি না।
অ্যান্ড্রুব

33
আমাকে এখানে @ বা্যাকের সাথে থাকতে হবে। আমাদের গ্রাহকের এখনও একটি সরকারী ন্যূনতম প্রয়োজনীয় আইই 6 (!!) রয়েছে। সমস্যাটি হ'ল, তাদের গ্রাহকরা কম উন্নত দেশগুলি সহ সারা বিশ্ব জুড়ে রয়েছে। "গ্রাহকের গ্রাহকরা" আমাদের গ্রাহকের সাথে ব্যবসা করতে খুব পুরানো কম্পিউটার ব্যবহার করতে পারেন। সুতরাং পুরানো ব্রাউজারটি অবশ্যই কমপক্ষে
স্বল্প

8
ছেলেরা ক্লায়েন্টের জন্য আপনার বিকাশের কোনও সমাধানের প্রয়োজনীয়তা নির্ধারণ করতে পারবেন না। যদি সেই ক্লায়েন্ট যদি কোনও পুরানো ব্রাউজারের জন্য সমর্থন চায় বা এটির প্রয়োজন হয় তবে এটির সময়কাল, এটি আপনার কাজ। আপনারা "সত্যিকারের ইঞ্জিনিয়ারদের" কে কথা বলেন সত্য প্রকৌশলীদের একটি খারাপ নাম দেয় talking
এড ডিগাগেন

5
@ এডিগ্যাগেন - আপনাকে নিয়মিত আইই এর পুরানো সংস্করণগুলি সমর্থন করা বন্ধ করতে হবে। এটি আপনার কোডবেস উন্নত করে এবং দর্শকদের কোনও পুরানো আইই না ব্যবহার করতে অনুপ্রাণিত করে। একমাত্র কঠিন জিনিসটি আপনি কখন সমর্থন বাদ দিতে পারবেন তা নির্ধারণ করা। গুগলের ওয়েবসাইটগুলিতে প্রচুর দর্শক রয়েছে, যদি তারা কোনও পুরানো আইই বাদ দেওয়ার সিদ্ধান্ত নিয়ে থাকে তবে আপনি তাদের বিশ্বাস করতে পারেন যে এটি একটি ভাল সিদ্ধান্ত ছিল। একটি সংস্থা এমনকি তাদের ব্যবহারকারীদের যতদূর জানিয়েছে যে প্রতিটি পুরানো আইই ব্যবহারকারীকে তাদের আইই কোডটি বজায় রাখার চেয়ে আধুনিক কম্পিউটার কেনার জন্য তাদের আরও বেশি অর্থ প্রদান করা হয় (যা তারা প্রদান করেছিল ঠিক তেমন)।
janko-m

5
আমি যখন পড়তে দেখি "আইই 8 এখনও স্ট্যান্ডার্ড, এমনকি উইন্ডোজ 7 এও"
ক্যাপটুল

544

স্বীকৃত উত্তরটি কাজ করে তবে styleআমার পরীক্ষায় DOM এ একটি খালি বৈশিষ্ট্য রেখে যায়। কোনও বড় কথা নয়, তবে এটি সমস্ত কিছু সরিয়ে দেয়:

removeAttr( 'style' );

এটি ধরে নিয়েছে যে আপনি সমস্ত গতিশীল স্টাইলিং মুছে ফেলতে এবং স্টাইলশীট স্টাইলিংয়ে ফিরে যেতে চান।


এটি jQuery এ একটি দুর্দান্ত ধারণা তবে বগি, জমা দেওয়া বাগটি দেখুন: বাগস.জকোয়ারি
তোশ

4
@ তোশ bu বাগটি সমাধান হয়েছে 8/25/2011: bugs.jquery.com/…
থিংকিং

আমি জানি তবে কমপক্ষে ১.7 সংস্করণে এটি এখনও বগি, আমি ১.৮ পরীক্ষা করিনি
তোশ

7
এটি শৈলীর বৈশিষ্ট্যের অন্যান্য সমস্ত বৈশিষ্ট্যও সরিয়ে ফেলবে। সুতরাং বুদ্ধিমানের সাথে নির্বাচন করুন।
কোডিংট্রিমে

1
এই চালাক! গৃহীত উত্তর এমন পরিস্থিতিতে কাজ করবে না যেখানে jquery দ্বারা তৈরি ইনলাইন স্টাইলটি CSS স্টাইলগুলিকে ওভাররাইট করতে হবে তবে এই পদ্ধতিটি সমস্ত পরিস্থিতিতে সূক্ষ্মভাবে কাজ করে।
ফরজাদ ওয়াইজেড

170

JQuery ব্যবহার করে কোনও সিএসএস সম্পত্তি মুছে ফেলার বিভিন্ন উপায় রয়েছে:

1. সিএসএস সম্পত্তিটিকে তার ডিফল্ট (প্রাথমিক) মান হিসাবে সেট করা

.css("background-color", "transparent")

দেখুন MDN এ সিএসএস সম্পত্তি জন্য প্রাথমিক মান । এখানে ডিফল্ট মান transparent। আপনি inheritএর পিতামাতার কাছ থেকে বৈশিষ্ট্যটি উত্তরাধিকার সূত্রে একাধিক সিএসএস বৈশিষ্ট্যের জন্যও ব্যবহার করতে পারেন । সিএসএস 3 / CSS4, আপনি এছাড়াও ব্যবহার করতে পারেন initial, revertঅথবা unsetকিন্তু এই কীওয়ার্ড সীমিত ব্রাউজার সমর্থনের থাকতে পারে।

2. সিএসএস সম্পত্তি মুছে ফেলা হচ্ছে

একটি খালি স্ট্রিং সিএসএস বৈশিষ্ট্য, যেমন

.css("background-color","")

তবে সাবধান থাকুন, যেমন jQuery .css () ডকুমেন্টেশনে উল্লিখিত , এটি সম্পত্তি সরিয়ে দেয় তবে এটি ব্যাকগ্রাউন্ড সহ নির্দিষ্ট সিএসএস শর্টহ্যান্ড বৈশিষ্ট্যের জন্য আইই 8 এর সাথে তুলনামূলক সমস্যা রয়েছে ।

শৈলীর বৈশিষ্ট্যটির মূল্য একটি খালি স্ট্রিংয়ে সেট করা - যেমন $ ('# মাইডিভ') jQuery এর .css () পদ্ধতির মাধ্যমে বা স্টাইলের সম্পত্তির সরাসরি DOM ম্যানিপুলেশনের মাধ্যমে বৈশিষ্ট্য। এটি কোনও স্টাইলশিট বা উপাদানটিতে সিএসএস বিধি প্রয়োগ করে এমন স্টাইল সরিয়ে দেয় না। সতর্কতা: একটি উল্লেখযোগ্য ব্যতিক্রম হ'ল IE 8 এবং নীচের জন্য, একটি শর্টহ্যান্ড সম্পত্তি যেমন সীমানা বা ব্যাকগ্রাউন্ড অপসারণ স্টাইলশিট বা উপাদানকে নির্ধারণ না করেই উপাদানটিকে পুরোপুরি উপাদান থেকে সরিয়ে ফেলবে

3. উপাদান সম্পূর্ণ শৈলী অপসারণ

.removeAttr("style")

49

খাঁটি জাভাস্ক্রিপ্টের সাথে শৈলীর বৈশিষ্ট্যটি সরিয়ে দেওয়ার উপায়টি পেয়েছি কেবল খাঁটি জাভাস্ক্রিপ্টের উপায়টি আপনাকে জানাতে

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

11
লোকটি ইতিমধ্যে jQuery ব্যবহার করে ... ক্রস-ব্রাউজার পদ্ধতির পুনরায় প্রয়োগ কেন বিরক্ত করে?!?!
বিলি

32
কারণ jquery প্রতিটি জিনিস নয়, কারণ তিনি বা সম্ভবত আমাদের প্রত্যেককে বলা উচিত যে বিকাশকারীদের জাওয়াস্ক্রিপ্ট হিসাবে মূল ভাষার সাথে কী এমন সামঞ্জস্যতা এবং কীভাবে এই জাতীয় জিনিসগুলি করা উচিত তা জানা উচিত, সম্ভবত এটি আমার তত্ত্বটি আমি ইতিমধ্যে আমার নিজস্ব কাঠামো তৈরি করেছি মূল জাভাস্ক্রিপ্ট সম্পর্কে আমার জ্ঞান থেকে আমি অন্যদের জিনিসগুলিকে আমার নিজস্ব ধারণা এবং আমার চিন্তাভাবনা করার উপায় ব্যবহার করতে অস্বীকার করি :) এবং আপনার (-) জন্য আমাকে কেবল মূল্য সংযোজন করার দরকার ছিল :) এবং সেই উপায় দ্বারাও লোকটি ছেলে না হওয়ার জন্য সে তার নাম অ্যালেক্স
মারওয়ান

1
আমি কেবল লক্ষ্য করতে চাই যে আপনার দস্তাবেজ চেক করা উচিত নয় all সমস্ত যদি আপনি এটি ব্যবহার না করেন। সম্ভবত আপনি এটি এটি পরীক্ষা করে দেখতে পারেন: যদি (elm.style.removeProperty) {elm.style.removeProperty (সম্পত্তি নাম); } অন্যথায় যদি (elm.style.removeAttribute) {elm.style.removeAttribute (বৈশিষ্ট্য নাম); }
রিচার্ড

ঠিক আছে আপনি ঠিক বলেছেন এটি (নেভিগেটর.এপনেম == "মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরার") ডকুমেন্ট.body.style.removeAttribute ('ব্যাকগ্রাউন্ড-কালার') এর মতো হওয়া উচিত; অন্যটি ডকুমেন্ট.বি.স্টাইল.রেমোপ্রোপার্টি ('পটভূমি-বর্ণ'); এবং অন্যদিকে আপনার সমাধানটিও ঠিক :) আপনার নোটের জন্য ধন্যবাদ
মারওয়ান

9
না, আপনার অবশ্যই ব্রাউজারের জন্য যাচাই না করে ফাংশনটি উপস্থিত রয়েছে কিনা তা অবশ্যই পরীক্ষা করা উচিত। আইএস এর পরবর্তী সংস্করণে এমএস যদি ফাংশনের নাম পরিবর্তন করার সিদ্ধান্ত নেয়? আপনি কি তখন গিয়ে IE এর সংস্করণও পরীক্ষা করে দেখুন?
j03w

24

এটি সম্পূর্ণ ট্যাগটি সরিয়ে ফেলবে:

  $("body").removeAttr("style");

এটি মোটামুটি সমাধান এবং সর্বদা কার্যকর হবে না কারণ এটি সম্পূর্ণ উপাদানটির স্টাইল সরিয়ে দেয়
কনস্টান্টিন জাদিরান

19

এই jQuery ফাংশনগুলির মধ্যে একটিতে কাজ করা উচিত:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

22
কেবলমাত্র একটি সিএসএস সম্পত্তি অপসারণ করতে:var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');
ইলগার

আইগার - আপনার সমাধানটি সর্বাধিক নিকটস্থ। আমি এটিকে টেবিল কোষের স্তূপের জন্য '.এচ' লুপে রেখেছি যেখানে "প্রদর্শন: কোনও কিছুই নেই" যা যেতে হবে তবে অন্যান্য বৈশিষ্ট্য যা রেখেছিল with এটি ত্রুটিহীনভাবে কাজ করে, কেবল প্রদর্শনটি সরিয়ে দেয়: কোনও কিছুই না এবং বাকিটি রেখে।
রব ভন নেসেলরোড


7

যেমন কিছু সম্পর্কে:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

আমার এটা ভাল লেগেছে! আপনি নির্দিষ্ট সম্পত্তি এবং অন্য কিছুই মুছে ফেলুন।
জোয়েল

7

আমার প্লাগিন ব্যবহার করুন:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

আপনার ক্ষেত্রে, নিম্নলিখিত হিসাবে এটি ব্যবহার করুন:

$(<mySelector>).removeCss();

অথবা

$(<mySelector>).removeCss(false);

আপনি যদি এর ক্লাসে সংজ্ঞায়িত সিএসএসও মুছে ফেলতে চান:

$(<mySelector>).removeCss(true);

$(this).removeAttrঅপ্রয়োজনীয় এবং this.removeAttrযথেষ্ট হওয়া উচিত।
এমিল বার্গারন

নেই removeAttr এছাড়াও সরাবে classATTR? আমি এটি মনে করি না
আবদেনুর TOUMI

আমি removeAttrআপনার প্লাগইনটির ভিতরে কথা বলছি , যেখানে thisইতিমধ্যে একটি jQuery উপাদান রয়েছে। $(this)অপ্রয়োজনীয়।
এমিল বার্গারন

2
আহ! ঠিক আছে ঠিক আছে .. @ এমিলিবার্গারন, পুরানো jquery jQuery উপাদানকে ম্যাপযুক্ত thisহিসাবে সরবরাহ করে HTMLElement... যেমন আপনি দেখতে পাচ্ছেন, আমার উত্তরটি পুরানো ... তাই কেন .. যাইহোক, আমি আপনাকে বলতে পারি যে তারা কেন এটি পরিবর্তন করে, তারা তা করে কারণ তীর ফাংশন যা ES6 এ নতুন আসে। .. এবং thisঅকেজো হয়ে যায় এবং এটি দ্বারা প্রতিস্থাপন করা হয়েছিলevent.currentTarget
আবডেননর TOUMI

1
যথেষ্ট ফর্সা! ;) মজার বিষয় জেএস বিশ্বে 3 বছরের পুরানো।
এমিল বার্গারন

7

এটা চেষ্টা কর:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

ধন্যবাদ


আপনার "বিদ্যমান অপসারণ" এর একমাত্র সমস্যা হ'ল এটি যদি সেট থাকে তবে স্টাইলশীট ব্যাকগ্রাউন্ডকে ওভাররাইড করবে।
Jtbs

6

আপনি যদি সিএসএস স্টাইল ব্যবহার করেন তবে আপনি ব্যবহার করতে পারেন:

$("#element").css("background-color","none"); 

এবং তারপরে প্রতিস্থাপন করুন:

$("#element").css("background-color", color);

আপনি যদি সিএসএস স্টাইল ব্যবহার না করেন এবং এইচটিএমএল উপাদানটিতে আপনার বৈশিষ্ট্য থাকে তবে আপনি ব্যবহার করতে পারেন:

$("#element").attr("style.background-color",color);



2

আপনি যে স্টাইলটি সিএসএস ক্লাস অপসারণ করতে চান তা কেন তৈরি করবেন না? এখন আপনি ব্যবহার করতে পারেন: .removeClass()। এটি ব্যবহারের সম্ভাবনাও উন্মুক্ত করে:.toggleClass()

(উপস্থিত থাকলে শ্রেণিটি সরিয়ে ফেলুন এবং এটি না থাকলে এটি যুক্ত করুন))

বিন্যাস সংক্রান্ত সমস্যাগুলি মোকাবেলা করার সময় কোনও শ্রেণি যুক্ত করা / অপসারণও পরিবর্তন / সমস্যা সমাধানে কম বিভ্রান্ত হয় (কেন একটি নির্দিষ্ট শৈলী অদৃশ্য হয়ে গেল তা বোঝার চেষ্টা করার বিপরীতে))



1

এটি অন্যান্য কয়েকটি সমাধানের চেয়ে জটিল, তবে দৃশ্যে আরও নমনীয়তা সরবরাহ করতে পারে:

1) আপনি যে স্টাইলিংটি প্রয়োগ করতে / নির্বাচন করতে চান তা আলাদা করতে (encapsulate) করার জন্য একটি শ্রেণি সংজ্ঞা করুন। এটি খালি থাকতে পারে (এবং এই ক্ষেত্রে সম্ভবত এটি হওয়া উচিত):

.myColor {}

2) এই কোড উপর ভিত্তি করে ব্যবহার http://jsfiddle.net/kdp5V/167/ থেকে এই উত্তর দ্বারা gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

ব্যবহারের উদাহরণ: http://jsfiddle.net/qvkwhtow/

আদেশ সহকারে:

  • ব্যাপকভাবে পরীক্ষা করা হয় না।
  • নতুন মানটিতে গুরুত্বপূর্ণ বা অন্যান্য নির্দেশকে অন্তর্ভুক্ত করা যায় না । এই হেরফেরের মাধ্যমে এই জাতীয় কোনও বিদ্যমান নির্দেশনা নষ্ট হবে।
  • কেবল কোনও স্টাইলসিলিটরের উপস্থিতি কেবলমাত্র পরিবর্তিত হয়। পুরো শৈলী যুক্ত বা সরিয়ে দেয় না, তবে এটি আরও বিস্তৃত কিছু দিয়ে করা যেতে পারে।
  • যে কোনও অবৈধ / অব্যবহারযোগ্য মান অগ্রাহ্য করা হবে বা ত্রুটি ছোঁড়া হবে।
  • ক্রোমে (কমপক্ষে), অ-স্থানীয় (ক্রস-সাইটের মতো) সিএসএস বিধিগুলি ডকুমেন্ট.স্টাইলশিট অবজেক্টের মাধ্যমে প্রকাশ করা হয় না, সুতরাং এটি তাদের উপর কাজ করবে না। এই কোডটির "প্রথম পাওয়া" আচরণটি মাথায় রেখে একজনকে একটি স্থানীয় ওভাররাইড যুক্ত করতে হবে এবং তা ব্যবহার করতে হবে।
  • ডকুমেন্ট.স্টাইলশিটগুলি সাধারণভাবে ম্যানিপুলেশনের পক্ষে বন্ধুত্বপূর্ণ নয়, আক্রমণাত্মক ব্যবহারের জন্য এটি কাজ করার আশা করবেন না।

এই পদ্ধতিতে স্টাইলিংকে বিচ্ছিন্ন করা সিএসএসের যা কিছু রয়েছে তা ম্যানিপুলেট করা না হলেও। সিএসএস বিধি ম্যানিপুলেট করা jQuery সম্পর্কে যা হয় তা নয়, jQuery DOM উপাদানগুলিকে ম্যানিপুলেট করে এবং এটি করতে সিএসএস নির্বাচনকারীদের ব্যবহার করে।


1

ওয়েব ডেভলপমেন্টে সহজ। আমি কোনও নির্দিষ্ট স্টাইলটি সরিয়ে দেওয়ার পরে খালি স্ট্রিং ব্যবহার করার পরামর্শ দিই

$(element).style.attr = '  ';

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.