javascript jQuery CSS插件,返回元素的计算样式以伪克隆该元素?

nkcskrwz  于 2022-12-25  发布在  Java
关注(0)|答案(9)|浏览(138)

我正在寻找一种使用jQuery为第一个匹配的元素返回一个计算样式的对象的方法,然后我可以将这个对象传递给jQuery的css方法的另一个调用。
例如,对于width,我可以执行以下操作使2个div具有相同的宽度:

$('#div2').width($('#div1').width());

如果我能使文本输入看起来像现有的span,那就太好了:

$('#input1').css($('#span1').css());

其中,不带参数的.css()返回一个可以传递给.css(obj)的对象。
(我找不到jQuery插件,但它似乎应该存在。如果它不存在,我会把我下面的插件和我使用的所有属性一起发布。)
基本上,我想伪克隆某些元素**,但使用不同的标记**。例如,我想隐藏一个li元素,并在其上放置一个input元素。当用户键入时,看起来就像他们在内联编辑元素

**我也愿意考虑其他方法来解决这个伪克隆问题。**有什么建议吗?

这是我目前拥有的。唯一的问题是得到所有可能的风格。这可能是一个可笑的长名单。

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

编辑:我已经使用上面的代码一段时间了,它运行良好,行为和原来的css方法完全一样,只有一个例外:如果传递了0个参数,则返回计算的样式对象。
正如你所看到的,它会立即调用原来的css方法,如果是这样的话。否则,它会得到所有列出的属性的计算样式(从Firebug的计算样式列表中收集)。虽然它得到了一个很长的值列表,但它相当快。希望它对其他人有用。

pkmbmrz7

pkmbmrz71#

虽然晚了两年,但我已经有了你想要的解决方案。这是我写的一个插件(通过将另一个家伙的函数 Package 成插件格式),它完全可以满足你的需要,但在所有浏览器上都可以得到所有可能的样式,甚至IE。
第一个月

/*
 * 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
js5cn81o

js5cn81o2#

它不是jQuery,但在Firefox、Opera和Safari中,你可以使用window.getComputedStyle(element)来获取元素的计算样式,在IE〈=8中,你可以使用element.currentStyle。每种情况下返回的对象都不同,我不确定它们对使用Javascript创建的元素和样式的效果如何,但也许它们会很有用。
在Safari中,你可以做以下事情,这是一种整洁:

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

dtcbnfnu3#

我不知道你是否满意你目前得到的答案,但我不满意,我的答案可能也不会让你满意,但它可能会帮助别人。
在思考了如何将元素的样式从一个元素“克隆”或“复制”到另一个元素之后,我开始意识到,循环通过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'));

在那之后,无论还有什么看起来“不一致”的地方,我都会尝试用样式表来修复,以免我的J们被太多错误的想法弄得一团糟。

pvcm50d1

pvcm50d14#

我喜欢你的答案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)'
}

谢谢你的出发点。

fjaof16o

fjaof16o5#

现在我已经花了一些时间来研究这个问题,并更好地理解了jQuery的内部css方法是如何工作的,我所发布的内容似乎对我提到的用例来说足够好了。
有人建议你可以用CSS来解决这个问题,但我认为这是一个更通用的解决方案,它可以在任何情况下工作,而不必添加或删除类或更新你的css。
我希望其他人觉得它有用。如果你发现一个bug,请告诉我。

n6lpvg4x

n6lpvg4x6#

多用途.css()

用法

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

主要观点摘自Dakota'sHexInteractive's答案。

insrf1ej

insrf1ej7#

我只是想给Dakota提交的代码添加一个扩展。
如果要克隆应用了所有样式的元素及其所有子元素,则可以使用以下代码:

/*
 * 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);

然后你可以做:第一个月

wvyml7n5

wvyml7n58#

OP提供了一个很棒的函数。我稍微修改了一下,这样你就可以选择你想要返回的值。

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

通过指定您自己的数组来选择所需的值:第一个月

vsnjm48y

vsnjm48y9#

$.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'])

相关问题