복붙노트

[JQUERY] 반환 해당 요소 의사 클론 요소의 스타일을 계산 한의 jQuery CSS 플러그인?

JQUERY

반환 해당 요소 의사 클론 요소의 스타일을 계산 한의 jQuery CSS 플러그인?

해결법

  1. 1.2 년 늦게,하지만 난 당신이 찾고있는 해결책을 가지고 있습니다. 여기에 내가 쓴 플러그인은 당신이 원하는 정확히 않지만, 모든 브라우저에서도 IE에서 가능한 모든 스타일을 얻을 수있는 (형식 플러그인 다른 사람의 기능을 감싸서)입니다.

    2 년 늦게,하지만 난 당신이 찾고있는 해결책을 가지고 있습니다. 여기에 내가 쓴 플러그인은 당신이 원하는 정확히 않지만, 모든 브라우저에서도 IE에서 가능한 모든 스타일을 얻을 수있는 (형식 플러그인 다른 사람의 기능을 감싸서)입니다.

    jquery.getStyleObject.js :

    /*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 *
 * Copyright: Unknown, see source link
 * Plugin version by Dakota Schneider (http://hackthetruth.org)
 */

(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;i<style.length;i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);

    기본 사용법은 매우 간단하다 :

    var style = $("#original").getStyleObject(); // copy all computed CSS properties
$("#original").clone() // clone the object
    .parent() // select it's parent
    .appendTo() // append the cloned object to the parent, after the original
                // (though this could really be anywhere and ought to be somewhere
                // else to show that the styles aren't just inherited again
    .css(style); // apply cloned styles

    희망이 도움이.

  2. 2.그것은 파이어 폭스, 오페라와 사파리에서, jQuery를 아니지만 당신이 IE <= 8이 element.currentStyle를 사용할 수있는 요소와의 계산 된 스타일을 얻을 수 window.getComputedStyle (요소)를 사용할 수 있습니다. 반환 된 객체는 각각의 경우에 다른, 내가 얼마나 잘 자바 스크립트를 사용하여 만든 요소와 스타일 중 하나가 작동 모르겠지만, 아마도 그들은 도움이 될 것입니다.

    그것은 파이어 폭스, 오페라와 사파리에서, jQuery를 아니지만 당신이 IE <= 8이 element.currentStyle를 사용할 수있는 요소와의 계산 된 스타일을 얻을 수 window.getComputedStyle (요소)를 사용할 수 있습니다. 반환 된 객체는 각각의 경우에 다른, 내가 얼마나 잘 자바 스크립트를 사용하여 만든 요소와 스타일 중 하나가 작동 모르겠지만, 아마도 그들은 도움이 될 것입니다.

    사파리에서 당신은 깔끔한의 종류는 다음을 수행 할 수 있습니다 :

    document.getElementById('b').style.cssText = window.getComputedStyle(document.getElementById('a')).cssText;

  3. 3.난 당신이 지금까지 얻은 답변 당신이 경우에있는 거 행복을 잘 모릅니다하지만 난 아니었고 내 중 하나 당신을 기쁘게하지 않을 수도 있지만, 다른 사람을 도움이 될 수 있습니다.

    난 당신이 지금까지 얻은 답변 당신이 경우에있는 거 행복을 잘 모릅니다하지만 난 아니었고 내 중 하나 당신을 기쁘게하지 않을 수도 있지만, 다른 사람을 도움이 될 수 있습니다.

    방법 "복제"나에에 숙고 후 나는 그것이 N을 통해 루프에 대한 접근 방식의 매우 최적 아니라는 것을 깨닫고 N2에 적용 할 온 다른 하나에서 요소의 스타일을 "복사"아직 우리는있는 거 그렇다고이 붙어 .

    이러한 문제에 직면하고있는 자신을 발견 할 때, 당신은 거의 이제까지 당신이 일반적으로 "일부"스타일을 적용 할 특정 이유가 ... 다른 하나 개의 요소에서 모든 스타일을 복사 할 필요가 없습니다.

    저는 여기에 복귀 무엇 :

    $.fn.copyCSS = function( style, toNode ){
  var self = $(this);
  if( !$.isArray( style ) ) style=style.split(' ');
  $.each( style, function( i, name ){ toNode.css( name, self.css(name) ) } );
  return self;
}

    당신은 그것을 첫 번째 인수하고, 두 번째 인수로 그들을 복제과 같이 할 노드와 같은 CSS 속성의 목록을 공백으로 구분하여 전달할 수 있습니다 :

    $('div#copyFrom').copyCSS('width height color',$('div#copyTo'));

    다른 무엇이든간에 그 이후 "정렬 안"에 보인다, 나는 너무 많은 불발 아이디어를 내 JS를 혼란 여부에 스타일 시트로 해결하려고합니다.

  4. 4.지금은 문제로보고 jQuery의 내부 CSS 방식의 작품, 내가 무엇을 게시 한 것은 내가 언급하는 사용 사례에 대해 충분히 잘 작동하는 것 같다 방법을 더 잘 이해하는 데 시간이 했어.

    지금은 문제로보고 jQuery의 내부 CSS 방식의 작품, 내가 무엇을 게시 한 것은 내가 언급하는 사용 사례에 대해 충분히 잘 작동하는 것 같다 방법을 더 잘 이해하는 데 시간이 했어.

    당신이 CSS이 문제를 해결할 수 있음을 제안되었다,하지만 나는 이것이 제거 클래스를 추가하거나 CSS를 업데이트 할 필요없이 어떤 경우에 작동합니다 좀 더 일반화 된 솔루션입니다 생각합니다.

    나는 다른 사람들이 유용 바랍니다. 당신이 버그를 발견하면 알려 주시기 바랍니다.

  5. 5.나는 당신의 대답 Quickredfox을 좋아합니다. 좀 CSS를 복사 할 필요하지만 바로 그래서는 "toNode"선택하도록 수정했습니다.

    나는 당신의 대답 Quickredfox을 좋아합니다. 좀 CSS를 복사 할 필요하지만 바로 그래서는 "toNode"선택하도록 수정했습니다.

    $.fn.copyCSS = function( style, toNode ){
  var self = $(this),
   styleObj = {},
   has_toNode = typeof toNode != 'undefined' ? true: false;
 if( !$.isArray( style ) ) {
  style=style.split(' ');
 }
  $.each( style, function( i, name ){ 
  if(has_toNode) {
   toNode.css( name, self.css(name) );
  } else {
   styleObj[name] = self.css(name);
  }  
 });
  return ( has_toNode ? self : styleObj );
}

    이처럼 호출하는 경우 :

    $('div#copyFrom').copyCSS('width height color');

    그런 다음 나중에 사용에 대한 CSS 선언과 객체를 반환합니다 :

    {
 'width': '140px',
 'height': '860px',
 'color': 'rgb(238, 238, 238)'
}

    출발점 주셔서 감사합니다.

  6. 6.

    $('body').css();        // -> { ... } - returns all styles
$('body').css('*');     // -> { ... } - the same (more verbose)
$('body').css('color width height')  // -> { color: .., width: .., height: .. } - returns requested styles
$('div').css('width height', '100%')  // set width and color to 100%, returns self
$('body').css('color')  // -> '#000' - native behaviour

    (function($) {

    // Monkey-patching original .css() method
    var nativeCss = $.fn.css;

    var camelCase = $.camelCase || function(str) {
        return str.replace(/\-([a-z])/g, function($0, $1) { return $1.toUpperCase(); });
    };

    $.fn.css = function(name, value) {
        if (name == null || name === '*') {
            var elem = this.get(0), css, returns = {};
            if (window.getComputedStyle) {
                css = window.getComputedStyle(elem, null);
                for (var i = 0, l = css.length; i < l; i++) {
                    returns[camelCase(css[i])] = css.getPropertyValue(css[i]);
                }
                return returns;
            } else if (elem.currentStyle) {
                css = elem.currentStyle;
                for (var prop in css) {
                    returns[prop] = css[prop];
                }
            }
            return returns;
        } else if (~name.indexOf(' ')) {
            var names = name.split(/ +/);
            var css = {};
            for (var i = 0, l = names.length; i < l; i++) {
                css[names[i]] = nativeCss.call(this, names[i], value);
            }
            return arguments.length > 1 ? this : css;
        } else {
            return nativeCss.apply(this, arguments);
        }
    }

})(jQuery);

    주요 아이디어는 다코타의 & HexInteractive의 응답에서 가져옵니다.

  7. 7.난 그냥 다코타에 의해 제출 된 코드의 확장을 추가하고 싶었다.

    난 그냥 다코타에 의해 제출 된 코드의 확장을 추가하고 싶었다.

    당신이 그것을에 적용되는 스타일과 모든 아이들의 모든 요소와 요소를 복제 할 경우, 다음과 같은 코드를 사용할 수 있습니다 :

    /*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 *
 * Copyright: Unknown, see source link
 * Plugin version by Dakota Schneider (http://hackthetruth.org)
 */

(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;i<style.length;i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }


    $.fn.cloneWithCSS = function() {
        var styles = {};

        var $this = $(this);
        var $clone = $this.clone();

        $clone.css( $this.getStyleObject() );

        var children = $this.children().toArray();
        var i = 0;
        while( children.length ) {
            var $child = $( children.pop() );
            styles[i++] = $child.getStyleObject();
            $child.children().each(function(i, el) {
                children.push(el);
            })
        }

        var cloneChildren = $clone.children().toArray()
        var i = 0;
        while( cloneChildren.length ) {
            var $child = $( cloneChildren.pop() );
            $child.css( styles[i++] );
            $child.children().each(function(i, el) {
                cloneChildren.push(el);
            })
        }

        return $clone
    }

})(jQuery);

    그럼 당신은 바로 수행 할 수 있습니다. $ 클론 = $ ( "# 대상") cloneWithCSS ()

  8. 8.영업에서 제공하는 다양한 기능. 나는 약간 당신이 반환 할 값을 선택할 수 있도록 수정했습니다.

    영업에서 제공하는 다양한 기능. 나는 약간 당신이 반환 할 값을 선택할 수 있도록 수정했습니다.

    (function ($) {
    var jQuery_css = $.fn.css,
        gAttr = ['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'];
    $.fn.css = function() {
        if (arguments.length && !$.isArray(arguments[0])) return jQuery_css.apply(this, arguments);
        var attr = arguments[0] || gAttr,
            len = attr.length,
            obj = {};
        for (var i = 0; i < len; i++) obj[attr[i]] = jQuery_css.call(this, attr[i]);
        return obj;
    }
})(jQuery);

    자신의 배열을 지정하여 사용자가 원하는 값을 선택합니다 : $ () CSS를 ([ '폭', '높이']).

  9. 9.

    $.fn.cssCopy=function(element,styles){
var self=$(this);
if(element instanceof $){
    if(styles instanceof Array){
        $.each(styles,function(val){
            self.css(val,element.css(val));
        });
    }else if(typeof styles===”string”){
        self.css(styles,element.css(styles));
    }
}
return this;
};

    사용 예

    $("#element").cssCopy($("#element2"),['width','height','border'])

    10. from https://stackoverflow.com/questions/1004475/jquery-css-plugin-that-returns-computed-style-of-element-to-pseudo-clone-that-el by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] $ (문서) .ready 필요가 있습니까?  (0) 2020.10.06
[JQUERY] 이미지의 jQuery 이벤트는로드  (0) 2020.10.06
[JQUERY] jQuery를 Ajax를 사용하여 MVC 컨트롤러 메서드에 개체의 목록을 전달  (0) 2020.10.06
[JQUERY] 어떻게 jQuery를 Deferreds의 배열과 함께 작동합니까?  (0) 2020.10.05
[JQUERY] 어떻게 IE는 단순히 응용 프로그램 / JSON 아니라 제공하는 것보다 다운로드 표시 설득 할 수 있습니까?  (0) 2020.10.05
,

티스토리툴바