[jquery] jQuery로 인라인 스타일을 제거 할 수 있습니까?

업데이트 : 다음 솔루션이 작동하는 동안 훨씬 쉬운 방법이 있습니다. 아래를 참조하십시오.

여기에 내가 생각해 낸 것이 있으며, 이것이 당신이나 다른 사람에게 도움이되기를 바랍니다.

$('#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 스타일 속성, jQuery의 .css()메소드 또는 스타일 속성의 직접 DOM 조작을 통해) 이미 적용된 요소에서 해당 속성을 제거합니다 . 그러나 스타일 시트 또는 <style>요소 에서 CSS 규칙으로 적용된 스타일은 제거하지 않습니다 .

jQuery가 여기서 마술을하고 있다고 생각하지 않습니다. 객체가 이것을 기본적으로 수행 하는 것 같습니다style .

답변

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

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

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');