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

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 조작을 통해.그러나 스타일시트에서 CSS 규칙이 적용된 스타일을 제거하지는 않습니다.<style>원소의

저는 jQuery가 여기서 어떤 마술을 하고 있다고 생각하지 않습니다. 이 물체는 원래 마술을 하는 것 같습니다.

.removeAttr("style")모든 스타일의 태그를 제거하는 것...

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

.attr("style",newValue)그것을 다른 것으로 설정하는 것.

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

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

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

날 위해 일했다!

다음과 같은 jquery 플러그인을 생성할 수 있습니다.

jQuery.fn.removeInlineCss = function (properties) {
  if (properties == null) return this.removeAttr('style')
  properties = properties.split(/\s+/)
  return this.each(function () {
    for (var i = 0; i < properties.length; i++)
      this.style.removeProperty(properties[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

jQuery의 방법을 사용하여 스타일을 설정할 수 있습니다.

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

게으른 방법 (미래의 디자이너들이 당신의 이름을 욕하고 당신을 잠결에 죽이게 할 것입니다):

#myelement 
{
    display: none !important;
}

고지 사항:나는 이 접근법을 옹호하지 않지만, 그것은 확실히 게으른 방법입니다.

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

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

스타일 특성 내에서 속성을 다른 것으로 설정하는 것이 아니라 제거하려는 경우 다음 방법을 사용합니다.

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

---

저는 다양한 방법과 결과를 가지고 놀 수 있는 대화형 바이올린을 만들었습니다.보아하니, 사이에 큰 차이가 없습니다.set to empty string,set to faux value그리고.removeProperty()이들은 모두 동일한 폴백(사전에 지정된 CSS 규칙 또는 브라우저의 기본값)을 발생시킵니다.

화면표시가 스타일의 유일한 매개변수인 경우 다음 명령을 실행하여 모든 스타일을 제거할 수 있습니다.

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

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

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

이제 요소는 다음과 같이 표시됩니다.

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

여기 jQuery에 연결하는 인라인Style 선택기 필터가 있습니다.

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

기타...

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

스타일을 더 이상 적용하지 않도록 플러그인을 변경합니다.그것은 그 이후의 스타일을 없애는 것보다 훨씬 나을 것입니다.

저는 폭 속성과 비슷한 문제가 있었습니다.코드에서 !important를 제거할 수 없었고, 새 템플릿에 이 스타일이 필요했기 때문에 요소에 Id(모달 스타일)를 추가한 후 템플릿에 다음 코드를 추가했습니다.

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

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

처음에 나는 css에서 인라인 스타일을 제거하려고 했지만 작동하지 않고 디스플레이와 같은 새로운 스타일을 제거합니다. 아무 것도 덮어쓰지 않을 것입니다.하지만 JQuery에서는 이렇게 작동합니다.

언급URL : https://stackoverflow.com/questions/2465158/is-it-possible-to-remove-inline-styles-with-jquery