เป็นไปได้ไหมที่จะลบรูปแบบอินไลน์ด้วย jQuery

ปลั๊กอิน jQuery กำลังใช้รูปแบบอินไลน์ ( display:block) display:noneฉันรู้สึกขี้เกียจและต้องการที่จะแทนที่ได้ด้วย

อะไรคือวิธีที่ดีที่สุด (ขี้เกียจ)

อัปเดต:ในขณะที่วิธีการแก้ปัญหาต่อไปนี้ใช้ได้ แต่มีวิธีที่ง่ายกว่ามาก ดูด้านล่าง

นี่คือสิ่งที่ฉันคิดขึ้นมาและฉันหวังว่านี่จะเป็นประโยชน์กับคุณหรือคนอื่น ๆ :

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

นี่จะเป็นการลบสไตล์อินไลน์

ฉันไม่แน่ใจว่านี่คือสิ่งที่คุณต้องการ $('#element').css('display', 'inline')คุณต้องการที่จะแทนที่มันซึ่งเป็นแหลมออกแล้วจะกระทำได้ง่ายโดย

สิ่งที่ฉันกำลังมองหาคือทางออกในการลบสไตล์อินไลน์อย่างสมบูรณ์ ฉันต้องการสิ่งนี้สำหรับปลั๊กอินฉันกำลังเขียนที่ฉันต้องตั้งค่า CSS แบบอินไลน์ชั่วคราว แต่ต้องการลบออกในภายหลัง ฉันต้องการสไตล์ชีทที่จะควบคุมกลับ ฉันสามารถทำได้โดยการเก็บค่าดั้งเดิมทั้งหมดแล้วนำกลับมาใส่ใหม่ แต่วิธีนี้ให้ความรู้สึกที่สะอาดกว่าสำหรับฉัน

นี่คือในรูปแบบปลั๊กอิน:

(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 ผ่าน.css()วิธีของ jQuery หรือผ่านการจัดการ DOM โดยตรงของคุณสมบัติสไตล์ อย่างไรก็ตามจะไม่ลบสไตล์ที่ใช้กับกฎ CSS ในสไตล์ชีทหรือ<style>องค์ประกอบ

ฉันไม่คิดว่า jQuery กำลังทำเวทมนต์อยู่ที่นี่; ดูเหมือนว่าstyleวัตถุไม่นี้โดยกำเนิด

.removeAttr("style") เพื่อกำจัดแท็กสไตล์ทั้งหมด ...

.attr("style") เพื่อทดสอบค่าและดูว่ามีรูปแบบอินไลน์หรือไม่ ...

.attr("style",newValue) เพื่อตั้งค่าเป็นอย่างอื่น

วิธีที่ง่ายที่สุดในการลบรูปแบบอินไลน์ (สร้างโดย jQuery) คือ:

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

โค้ดอินไลน์ควรหายไปและวัตถุของคุณควรปรับเปลี่ยนสไตล์ที่กำหนดไว้ล่วงหน้าในไฟล์ CSS ของคุณ

ทำงานให้ฉัน!

คุณสามารถกำหนดสไตล์โดยใช้cssวิธีการของ jQuery :

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

คุณสามารถสร้างปลั๊กอิน 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

วิธีขี้เกียจ (ซึ่งจะทำให้นักออกแบบในอนาคตสาปแช่งชื่อและสังหารคุณในขณะหลับ):

#myelement 
{
    display: none !important;
}

ข้อจำกัดความรับผิดชอบ:ฉันไม่สนับสนุนวิธีนี้ แต่แน่นอนว่าเป็นวิธีที่ขี้เกียจ

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

$("[style*=block]").hide();

หากคุณต้องการที่จะลบคุณสมบัติภายในสไตล์แอตทริบิวต์ - ไม่ใช่แค่ตั้งค่าเป็นอย่างอื่น - คุณใช้removeProperty()วิธีการ:

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

UPDATE:
ฉันได้ทำซอโต้ตอบเพื่อเล่นกับวิธีการต่าง ๆ และผลลัพธ์ของพวกเขา เห็นได้ชัดว่ามีไม่มากของความแตกต่างระหว่างset to empty string,set to faux valueremoveProperty()และ พวกเขาทั้งหมดส่งผลในทางเลือกเดียวกัน - ซึ่งเป็นกฎ CSS ที่กำหนดไว้ล่วงหน้าหรือค่าเริ่มต้นของเบราว์เซอร์

ในกรณีที่จอแสดงผลเป็นพารามิเตอร์เดียวจากสไตล์ของคุณคุณสามารถเรียกใช้คำสั่งนี้เพื่อลบสไตล์ทั้งหมด:

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

หมายความว่าหากองค์ประกอบของคุณมีลักษณะเช่นนี้มาก่อน:

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

ตอนนี้องค์ประกอบของคุณจะมีลักษณะเช่นนี้:

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

นี่คือตัวกรองตัวเลือก inlineStyle ที่ฉันเขียนลงในปลั๊กอินนั้น jQuery

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

ในกรณีของคุณคุณสามารถใช้สิ่งนี้:

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

เปลี่ยนปลั๊กอินเพื่อไม่ใช้สไตล์อีกต่อไป นั่นจะดีกว่าการลบสไตล์หลังจากนั้น

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

ฯลฯ ...

เพียงปล่อยว่างไว้ที่พารามิเตอร์ 2!

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

ตอนแรกฉันพยายามที่จะลบรูปแบบอินไลน์ใน CSS แต่มันไม่ทำงานและรูปแบบใหม่เช่นการแสดง: ไม่มีจะถูกเขียนทับ แต่ใน JQuery มันใช้งานได้เช่นนี้

ฉันมีปัญหาที่คล้ายกันกับคุณสมบัติความกว้าง ฉันไม่สามารถลบ! important จากโค้ดและเนื่องจากมันต้องการสไตล์นี้ในเทมเพลตใหม่ฉันจึงเพิ่ม Id (modalstyling) ให้กับองค์ประกอบและหลังจากนั้นฉันจึงเพิ่มรหัสต่อไปนี้ลงในเทมเพลต:

<script type="text/javascript">
    $('#modalstyling').css('width', '');    //Removal of width !important
    $('#modalstyling').width('75%');        //Set custom width
</script>