jQuery를 사용하여 요소 스타일을 의사 복제하는 방법은 무엇입니까?

요소 스타일을 의사 복제본으로 복제하기 위한 jQuery 플러그인

다양한 접근 방식을 사용하여 서로 다른 태그가 있는 요소의 의사 복제본을 생성할 수 있습니다. jQuery에서. 자세한 설명과 해결 방법은 다음과 같습니다.

jQuery의 getComputeStyle 플러그인

요소에 대해 계산된 스타일의 개체를 반환해야 하는 특정 요구 사항의 경우 jQuery getStyleObject 플러그인을 활용할 수 있습니다. , IE 브라우저를 포함한 모든 요소에서 가능한 모든 스타일을 검색합니다.

사용:

var style = $("#original").getStyleObject();

jQuery의 CSS 메서드 수정

또 다른 접근 방식은 jQuery의 CSS 메서드를 다음과 같이 수정합니다.

jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
    if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
    var styleObj = {};
    // List of style properties to get
    var styleList = ['font-family','font-size','font-weight','font-style','color',
    'text-transform','text-decoration','letter-spacing','word-spacing',
    'line-height','text-align','vertical-align','direction','background-color',
    'background-image','background-repeat','background-position',
    'background-attachment','opacity','width','height','top','right','bottom',
    'left','margin-top','margin-right','margin-bottom','margin-left',
    'padding-top','padding-right','padding-bottom','padding-left',
    'border-top-width','border-right-width','border-bottom-width',
    'border-left-width','border-top-color','border-right-color',
    'border-bottom-color','border-left-color','border-top-style',
    'border-right-style','border-bottom-style','border-left-style','position',
    'display','visibility','z-index','overflow-x','overflow-y','white-space',
    'clip','float','clear','cursor','list-style-image','list-style-position',
    'list-style-type','marker-offset'];
    for (var i = 0; i < styleList.length; i++) {
        styleObj[styleList[i]] = jQuery.fn.css2.call(this, styleList[i]);
    }
    return styleObj;
};

이 수정을 사용하면 다음을 호출하여 첫 ​​번째로 일치하는 요소에 대해 계산된 스타일 객체를 얻을 수 있습니다.

var style = $('#original').css();

기타 편집 접근법

인라인 편집을 위한 요소 의사 복제의 일반적인 문제의 경우 다음 대체 접근법을 고려하십시오.

• jQuery.clone()과 .replaceWith() : 원본 요소를 복제하고 입력 필드가 되도록 수정한 다음 원본을 복제본으로 바꿉니다.
• jQuery.replaceWith()를 .data()로 바꿉니다: 입력 필드가 있는 원본 요소로, 이전 요소의 데이터를 데이터 속성에 저장합니다. 편집 후 입력을 데이터로 바꿉니다.
• ContentEditable 속성: 직접 인라인 편집을 허용하려면 요소의 contentEditable 속성을 전환합니다.

위 내용은 jQuery를 사용하여 요소 스타일을 의사 복제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!