JQuery এর সাহায্যে ইনলাইন শৈলীগুলি মুছে ফেলা সম্ভব?


236

একটি jQuery প্লাগইন একটি ইনলাইন স্টাইল প্রয়োগ করছে ( display:block)। আমি অলস বোধ করছি এবং এটিকে ওভাররাইড করতে চাই display:none

সবচেয়ে ভাল (অলস) উপায় কী?


79
এসও তে সহায়তা চাইতে হবে :)
ডেভ সোয়ারস্কি

15
সেরা উপায় এবং অলস উপায় অগত্যা এক নয়।
জোয়েল


দুটি উপায় i অর্জন করতে পারে, এবং অপসারণআত্র () বা .css () ব্যবহার করে কোডিপিডিয়া. info
সিংহ

উত্তর:


381

আপডেট: নিম্নলিখিত সমাধানগুলি কাজ করার সময়, একটি আরও সহজ পদ্ধতি রয়েছে। নিচে দেখ.


আমি এখানে যা এলাম তা এখানে এসেছি এবং আমি আশা করি এটি কার্যকর হবে - আপনার বা অন্য কারও কাছে:

$('#element').attr('style', function(i, style)
{
    return style && style.replace(/display[^;]+;?/g, '');
});

এটি সেই ইনলাইন স্টাইলটি সরিয়ে ফেলবে।

আমি নিশ্চিত নই যে আপনি যা চেয়েছিলেন এটি তাই। আপনি এটিকে ওভাররাইড করতে চেয়েছিলেন, যা ইতিমধ্যে উল্লিখিত হিসাবে, সহজেই সম্পন্ন হয়েছে $('#element').css('display', 'inline')

আমি যা খুঁজছিলাম তা হ'ল সমাধানটি সম্পূর্ণভাবে ইনলাইন স্টাইল সরানোর জন্য। আমার এটি এমন একটি প্লাগিনের জন্য দরকার যেখানে আমি লিখছি যেখানে আমাকে সাময়িকভাবে কিছু ইনলাইন সিএসএস মান সেট করতে হবে তবে পরে সেগুলি মুছে ফেলতে চাই; আমি চাই স্টাইলশিটটি আবার নিয়ন্ত্রণে নেওয়া উচিত। আমি এটির সমস্ত মূল মান সংরক্ষণ করে এবং সেগুলি আবার ইনলাইন রেখে আবারও করতে পারি, তবে এই সমাধানটি আমার কাছে অনেক বেশি পরিস্কার মনে করে।


এখানে এটি প্লাগইন ফর্ম্যাটে রয়েছে:

(function($)
{
    $.fn.removeStyle = function(style)
    {
        var search = new RegExp(style + '[^;]+;?', 'g');

        return this.each(function()
        {
            $(this).attr('style', function(i, style)
            {
                return style && style.replace(search, '');
            });
        });
    };
}(jQuery));

আপনি যদি আপনার স্ক্রিপ্টের আগে এই প্লাগইনটি পৃষ্ঠাতে অন্তর্ভুক্ত করেন তবে আপনি কেবল কল করতে পারেন

$('#element').removeStyle('display');

এবং সেই কৌশলটি করা উচিত।


আপডেট : আমি এখন বুঝতে পেরেছি যে এই সমস্ত নিরর্থক। আপনি খালি এটি সেট করতে পারেন:

$('#element').css('display', '');

এবং এটি আপনার জন্য স্বয়ংক্রিয়ভাবে সরানো হবে।

দস্তাবেজের একটি উদ্ধৃতি এখানে :

একটি শৈলীর বৈশিষ্ট্যের মান একটি খালি স্ট্রিংয়ে সেট করা - যেমন $('#mydiv').css('color', '')- যে সম্পত্তিটি ইতিমধ্যে সরাসরি প্রয়োগ করা হয়েছে, যদি এটি HTML শৈলীর বৈশিষ্ট্যে, jQuery এর .css()পদ্ধতিতে বা স্টাইলের সম্পত্তিটির সরাসরি DOM ম্যানিপুলেশনের মাধ্যমে সরিয়ে ফেলা হয়। এটি কোনও স্টাইলশিট বা <style>উপাদানটিতে সিএসএস বিধি প্রয়োগ করে এমন স্টাইল সরিয়ে দেয় না ।

আমি মনে করি না jQuery এখানে কোন যাদু করছে; মনে হচ্ছে styleঅবজেক্টটি এটিকে স্থানীয়ভাবে করে


3
@ এক্সিমি - ধন্যবাদ মানুষ। আমি এই সম্পর্কে ভাবছিলাম, এবং আমি সিদ্ধান্ত নিয়েছি যে এটি এমন সময় অপচয় নয়। এটি ইনলাইন স্টাইলগুলি পরীক্ষা করার জন্য গৃহীত হতে পারে, যার জন্য বর্তমানে jQuery- এ কোনও সমর্থন নেই ( .css('property')আপনাকে মান দেয় তবে এটি কোনও ইনলাইন শৈলী থেকে এসেছে কিনা তা আপনাকে জানায় না)।
জোসেফ সিলবার 21

আমি স্বাধীনভাবে একই উপসংহারে এসেছি - খালি স্ট্রিংটি আমরা যা চাই ঠিক তেমন করে মনে হচ্ছে। এটি আনুষ্ঠানিকভাবে এপিআই তে নথিভুক্ত করা হয়নি, তবে আশা করি এটি কাজ চালিয়ে যাবে।
জন z

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

এটি কি ফন্ট-পরিবারের মতো জিনিসগুলির সাথে কাজ করে, বা - রেজেক্সকে বিশৃঙ্খলা করে?
টিএমএইচ

4
@ মোশ - আপনি শুধু ব্যবহার করবেন না কেন $('#element').css('display', '')?
জোসেফ সিলবার

158

.removeAttr("style") পুরো স্টাইল ট্যাগ থেকে মুক্তি পেতে ...

.attr("style") মানটি পরীক্ষা করতে এবং একটি ইনলাইন শৈলী বিদ্যমান কিনা তা দেখতে ...

.attr("style",newValue) অন্য কিছু সেট করতে


18
এটি কেবলমাত্র নয়, সমস্ত ইনলাইন স্টাইলকে প্রভাবিত করবে display
স্ল্যাक्स

1
অসুস্থ শোনার চেষ্টা করুন এবং আপনাকে জানান, আমি সমস্ত ইনলাইন স্টাইলগুলি সাফ করার জন্য সাধারণত সাধারণত খুব খুশি ইনলাইন শৈলীগুলি ব্যবহার করি না
হ্যারল্ডো

11
@ ভালভাবে কথা বলুন, এটাই আমি "সম্পূর্ণ স্টাইলের ট্যাগ থেকে মুক্তি" বলতে
চাইছিলাম

ওহে. ইনটেল শৈলীর মতো কোনও উত্স থেকে ফন্ট, বি, স্ট্রং, সিএসএস ফাইলের মতো স্টাইলিং অ্যাট্রিবিউট .. থেকে কিছু 'স্টাইল' প্রয়োগ করা হয়েছিল কিনা তা যাচাই করার কোনও উপায় আছে .. কিছু সরিয়ে / রিসেট করবেন বা সমস্ত শট খালি রিসেট করবেন?
মিলচে প্যাটার্ন

যেহেতু প্রতিটি ইনলাইন শৈলী স্বতন্ত্রভাবে মুছে ফেলা (এখন-খালি) styleবৈশিষ্ট্যটিকে সরায় না , এটি এখনও নোটের যোগ্য।
Brilliand

26

ইনলাইন শৈলীগুলি সরিয়ে ফেলার সবচেয়ে সহজ উপায় (jQuery দ্বারা উত্পন্ন) হ'ল:

$(this).attr("style", "");

ইনলাইন কোডটি অদৃশ্য হয়ে যাবে এবং আপনার অবজেক্টটি আপনার সিএসএস ফাইলগুলিতে পূর্বনির্ধারিত শৈলীর সাথে মানিয়ে নেবে।

আমার জন্য কাজ!


13

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

$('something:visible').css('display', 'none');

@ কোবি: তিনি যে কোনও ইনলাইন স্টাইল সম্পর্কে জিজ্ঞাসা করছেন।
স্ল্যাक्स

ভুল, কি? আমি সম্ভবত কিছু বুঝতে পারি না। আমি চিন্তা করছি <div style="display:block;">, $('div').hide()
কোবি

3
@ কোবি: hideইনলাইন শৈলীর সংশোধন করার একটি বিশেষ ক্ষেত্রে সম্বোধন করে। এই উত্তরটি সব ক্ষেত্রে সম্বোধন করে। ( hide/showদুটি মান একটি টোগলযুক্ত হিসাবে দুটি হিসাবে একটি সীমাবদ্ধতা আছে। যেমন- কিছুই-> ব্লক বা না-> ইনলাইন।)
জোয়েল

@ জোয়েল: hide/ showএর পুরানো মানটি মনে রাখবে displayএবং সঠিকভাবে এটি পুনরুদ্ধার করবে।
স্ল্যাक्स

@ এসএলক্স: দুর্দান্ত এটি অবশ্যই যুক্ত করা উচিত, কারণ আমার মনে আছে এটির আগে সমস্যা ছিল।
জোয়েল

12

আপনি এই জাতীয় একটি jquery প্লাগইন তৈরি করতে পারেন:

jQuery.fn.removeInlineCss = (function(){
    var rootStyle = document.documentElement.style;
    var remover = 
        rootStyle.removeProperty    // modern browser
        || rootStyle.removeAttribute   // old browser (ie 6-8)
    return function removeInlineCss(properties){
        if(properties == null)
            return this.removeAttr('style');
        proporties = properties.split(/\s+/);
        return this.each(function(){
            for(var i = 0 ; i < proporties.length ; i++)
                remover.call(this.style, proporties[i]);
        });
    };
})();

ব্যবহার

$(".foo").removeInlineCss(); //remove all inline styles
$(".foo").removeInlineCss("display"); //remove one inline style
$(".foo").removeInlineCss("color font-size font-weight"); //remove several inline styles

1
এই উত্তরে একটি খুব ঝরঝরে এক-লাইন কৌশল রয়েছে যা jQuery ছাড়াই কার্যকর এবং যা অনেক দেবই জানেন না — কলিং elem.style.removeProperty('margin-left')কেবলমাত্র বৈশিষ্ট্য margin-leftথেকে মুছে ফেলা হবে style(এবং সেই সম্পত্তির মানটি ফিরিয়ে দেবে)। আইই 6-8 এর জন্য এটি elem.style.removeAttribute()
ক্রেগপাটিক

9

অলস উপায় (যা ভবিষ্যতের ডিজাইনাররা আপনার নামটিকে অভিশাপ দেবে এবং ঘুমের মধ্যে আপনাকে হত্যা করবে):

#myelement 
{
    display: none !important;
}

দাবি অস্বীকার: আমি এই পদ্ধতির পক্ষে নেই, তবে এটি অবশ্যই অলস উপায়।


2
এটি পরিষ্কারভাবে প্রশ্নের সেরা উত্তর কারণ এটি খারাপ অভ্যাস "অলস" এর চেতনায়। চিয়ার্স!
ktamlyn

6
$('div[style*=block]').removeAttr('style');

মাত্র about ('ডিভ [স্টাইল]') সম্পর্কে কী।
স্কাইবোনডোর

@ স্কাইবন্ডসর কেবল ব্লক উপাদানগুলির জন্যই এটি সরিয়ে ফেলবে না, যেমনটি তিনি এটি চেয়েছিলেন
এন্টপাও

অই হ্যাঁ. আমি ভেবেছিলাম তিনি সবকিছু থেকে ইনলাইন শৈলীগুলি সরাতে চেয়েছিলেন।
আকাশচুম্বী


6

আপনি যদি কোনও স্টাইলের বৈশিষ্ট্যের মধ্যে কোনও সম্পত্তি সরিয়ে নিতে চান - কেবল অন্য কোনও কিছুতে সেট করে না - আপনি এই removeProperty()পদ্ধতিটি ব্যবহার করেন :

document.getElementById('element').style.removeProperty('display');

আপডেট:
আমি বিভিন্ন পদ্ধতির সাথে এবং তার ফলাফলগুলির সাথে চারপাশে খেলতে একটি ইন্টারেক্টিভ ঝাঁকুনি তৈরি করেছি । কই, তেমন মধ্যে একটি পার্থক্য অনেক নয় set to empty string, set to faux valueএবং removeProperty()। এগুলির ফলাফল একই ফলব্যাক - যা হয় পূর্বনির্ধারিত সিএসএস বিধি বা ব্রাউজারের ডিফল্ট মান।


5

যদি আপনার স্টাইল থেকে প্রদর্শনটি কেবলমাত্র পরামিতি হয় তবে সমস্ত শৈলী অপসারণ করতে আপনি এই আদেশটি চালাতে পারেন:

$('#element').attr('style','');

এর অর্থ হ'ল যদি আপনার উপাদানটি এর আগে দেখায়:

<input id="element" style="display: block;">

এখন আপনার উপাদানটি এর মতো দেখাবে:

<input id="element" style="">

3

এখানে একটি ইনলাইন স্টাইল নির্বাচনকারী ফিল্টারটি আমি লিখেছি যে jQuery এ প্লাগ ইন।

$("div:inlineStyle(display:block)") // will select all divs with an inline style of display: block set

আপনার ক্ষেত্রে আপনি এটি ব্যবহার করতে পারেন:

$("div:inlineStyle(display:block)").hide();

2

আর স্টাইল প্রয়োগ না করে প্লাগইনটি পরিবর্তন করুন। এটি সেখানে-পরে শৈলী সরানোর চেয়ে অনেক ভাল better


1
তাই 'অলস'! এটি কোন প্লাগিনের বিট এটি আবিষ্কার করতে পারে না!
হ্যারল্ডো

4
আপনি কীভাবে অলসতার সংজ্ঞা দেন তা আমি জানি না, আমি কীভাবে এটি করব তা আমি ঠিক উত্তর দিয়েছি। প্লাগইনের বাইরে জিনিসগুলি প্যাচ করার বিপরীতে উত্সাহিত করে এমন সমস্যাটি ঠিক করার জন্য এটি বোধগম্য মনে হয়। আমি মেসিনেসেসের আগে থেকে দেখেছি যখন এটি করা হয়।
জোশ স্টোডোলা

কোন দিকে? আপনি যদি প্লাগইন সম্পাদনা করেন তবে নতুন সংস্করণে আপডেট করার পরে আপনি সমস্যা পেতে পারেন যা আপনার পরিবর্তনকে ওভাররাইড করে এবং লেআউটটিকে গোলমাল করবে। কে এক বছর বা এতক্ষণে মনে করবে যে আপনি সেখানে একটি সামান্য সামঞ্জস্য করেছেন? আমি সর্বদা প্লাগইন উত্স কোড সংশোধন করা ছাড়া অন্য সমাধানগুলি সন্ধান করার চেষ্টা করি
জিফিরিন

2

$el.css({ height : '', 'margin-top' : '' });

ইত্যাদি ...

খালি ২ য় পরম ফাঁকা রেখে দিন!


1
আপনি যদি কিছু লোককে ভোট দিয়ে থাকেন তবে দয়া করে একটি মন্তব্য দিন leave
তিনি ন্রিক

1
আমি চাই কারণ আপনার উত্তর দাও নি আপনি downvotes পেয়েছিলাম প্রশ্ন জিজ্ঞাসা : "jQuery plugin is applying an inline style (display:block). I'm feeling lazy and want to override it with display:none"। যদিও আপনার পাঠ্যটি সঠিক, আপনার কোড প্রশ্নটি সমাধান করে না।
কোডিং গেছে

আমার যে সমস্যাটি ছিল তা সমাধান করে দিয়েছি। Tnx।
যোডালার

0

$("#element").css({ display: "none" });

প্রথমে আমি CSS এ ইনলাইন স্টাইলটি সরিয়ে দেওয়ার চেষ্টা করেছি, তবে এটি কার্যকর হয় না এবং ডিসপ্লের মতো নতুন স্টাইল: কোনওটিই ওভাররাইট করা হবে না। তবে JQuery এ এটির মতো কাজ করে।


0

প্রস্থের সম্পত্তি নিয়ে আমার একই সমস্যা ছিল। আমি কোড থেকে গুরুত্বপূর্ণটি মুছে ফেলতে পারিনি, এবং যেহেতু এটি একটি নতুন টেম্পলেটটিতে এই স্টাইলটির প্রয়োজন ছিল আমি উপাদানটিতে একটি আইডি (মডেলস্টাইলিং) যুক্ত করেছি এবং পরে আমি এই কোডটি টেমপ্লেটে যুক্ত করেছি:

<script type="text/javascript">
    $('#modalstyling').css('width', '');    //Removal of width !important
    $('#modalstyling').width('75%');        //Set custom width
</script>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.