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

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

.removeAttr("style") 전체 스타일 태그를 제거하려면 ...

.attr("style") 값을 테스트하고 인라인 스타일이 있는지 확인하십시오 ...

.attr("style",newValue) 다른 것으로 설정

jQuery로 생성 된 인라인 스타일을 제거하는 가장 쉬운 방법은 다음과 같습니다.

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

인라인 코드가 사라지고 객체가 CSS 파일에 미리 정의 된 스타일을 적용해야합니다.

나를 위해 일했다!

jQuery의 css메소드를 사용하여 스타일을 설정할 수 있습니다 .

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

업데이트 : 다른 방법과 결과로 놀 수
있는 대화 형 바이올린 을 만들었습니다 . 와 set to empty string, 사이에는 큰 차이가 없습니다 . 그것들은 모두 동일한 폴백 (fallback)을 낳습니다. 이것은 미리 제공된 CSS 규칙이거나 브라우저의 기본값입니다.set to faux valueremoveProperty()

디스플레이가 스타일의 유일한 매개 변수 인 경우 모든 스타일을 제거하기 위해이 명령을 실행할 수 있습니다.

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

이전에 요소가 다음과 같았다면

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

이제 요소는 다음과 같습니다.

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

다음은 jQuery에 연결 하는 inlineStyle 선택기 필터 입니다.

$("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' : '' });

기타...

두 번째 매개 변수를 비워 두십시오!

$("#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>