[javascript] jQuery가 요소와 관련된 모든 CSS 스타일을 가져올 수 있습니까?

JAVASCRIPT / 글쓴이

jQuery에 기존 요소에서 모든 CSS를 가져 와서 모두 나열하지 않고 다른 CSS에 적용하는 방법이 있습니까?

이 스타일 속성이 인 경우 작동한다는 것을 알고 attr()있지만 모든 스타일은 외부 스타일 시트에 있습니다.

답변

몇 년 늦었지만 인라인 스타일과 외부 스타일을 모두 검색하는 솔루션이 있습니다.

function css(a) {
    var sheets = document.styleSheets, o = {};
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}

function css2json(css) {
    var s = {};
    if (!css) return s;
    if (css instanceof CSSStyleDeclaration) {
        for (var i in css) {
            if ((css[i]).toLowerCase) {
                s[(css[i]).toLowerCase()] = (css[css[i]]);
            }
        }
    } else if (typeof css == "string") {
        css = css.split("; ");
        for (var i in css) {
            var l = css[i].split(": ");
            s[l[0].toLowerCase()] = (l[1]);
        }
    }
    return s;
}

jQuery 객체를 전달 css()하면 객체를 반환하고 jQuery에 다시 연결할 수 있습니다 $().css().

var style = css($("#elementToGetAllCSS"));
$("#elementToPutStyleInto").css(style);

🙂

답변

2 년 늦었지만 원하는 솔루션이 있습니다. 원래 작성자로부터 신용을 얻지 않으려는 경우 여기에 필자 가 필요한 것에 매우 잘 작동하지만 모든 브라우저, 심지어 IE에서도 가능한 모든 스타일을 얻는 플러그인이 있습니다.

경고 : 이 코드는 많은 출력을 생성하므로 드물게 사용해야합니다. 모든 표준 CSS 속성뿐만 아니라 해당 브라우저에 대한 모든 공급 업체 CSS 속성도 복사합니다.

jquery.getStyleObject.js:

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);

기본 사용법은 매우 간단하지만 그 기능도 작성했습니다.

$.fn.copyCSS = function(source){
  var styles = $(source).getStyleObject();
  this.css(styles);
}

희망이 도움이됩니다.

답변

왜 .styleDOM 요소를 사용하지 않습니까? 이 같은 멤버를 포함하는 객체의 width과 backgroundColor.

답변

나는 많은 다른 해결책을 시도했다. 이것은 클래스 레벨과 요소에 직접 부여 된 스타일에 적용된 스타일을 선택할 수 있다는 점에서 저에게 효과적이었습니다. 따라서 CSS는 파일 레벨로 설정되고 스타일 속성으로 설정됩니다. 올바른 글꼴을 반환했습니다.

간단하다! (죄송합니다, 원래 찾은 곳을 찾을 수 없습니다)

//-- html object
var element = htmlObject; //e.g document.getElementById
//-- or jquery object
var element = htmlObject[0]; //e.g $(selector)

var stylearray = document.defaultView.getComputedStyle(element, null);
var font = stylearray["font-family"]

또는 배열을 순환하여 모든 스타일을 나열 할 수 있습니다

for (var key in stylearray) {
console.log(key + ': ' + stylearray[key];
}

답변

@marknadal의 솔루션은 나를 위해 하이픈으로 묶인 속성을 얻지 못했지만 (예 🙂 max-width첫 번째 for루프를 변경하면 css2json()작동하게 되었으며 반복 횟수가 적습니다.

for (var i = 0; i < css.length; i += 1) {
    s[css[i]] = css.getPropertyValue(css[i]);
}

length오히려 통해 in,검색 getPropertyValue()하지 않고 통해 검색toLowerCase().

답변