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

IT技术 javascript jquery css web-applications
2021-01-11 22:34:11

我正在寻找一种使用 jQuery 返回第一个匹配元素的计算样式对象的方法。然后我可以将此对象传递给 jQuery 的 css 方法的另一个调用。

例如,使用width,我可以执行以下操作以使 2 个 div 具有相同的宽度:

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

如果我能让文本输入看起来像现有的跨度,那就太好

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

其中 .css() 没有参数返回一个可以传递给.css(obj) 的对象

(我找不到用于此的 jQuery 插件,但它似乎应该存在。如果它不存在,我会将下面的插件变成一个插件并将其与我使用的所有属性一起发布。)

基本上,我想伪克隆某些元素但使用不同的标签例如,我有一个 li 元素,我想隐藏它并在它上面放置一个看起来相同的输入元素。当用户输入时,看起来他们正在编辑元素 inline

对于这个伪克隆问题的编辑,我也愿意接受其他方法。有什么建议?

这是我目前拥有的。唯一的问题是获取所有可能的样式。这可能是一个长得可笑的清单。


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 的计算样式列表中收集)。尽管它获得了很长的值列表,但速度非常快。希望对其他人有用。

6个回答

晚了两年,但我有你正在寻找的解决方案。这是我写的一个插件(通过以插件格式包装另一个人的函数)它完全符合你的要求,但在所有浏览器中都可以获得所有可能的样式,甚至 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

希望有帮助。

@HalfBloodPrince 正在寻找同样的东西,请参阅此页面上的不合格者的回答。
2021-03-14 22:34:11
有没有办法以各自的样式获取所有内部元素?内部元素没有得到他们的风格。
2021-03-16 22:34:11
@达科他州:+1。但我在最后加了括号 - getStyleObject();; 因为 style 否则将包含一个函数而不是一个具有所有样式的对象;)
2021-03-24 22:34:11
有没有机会/方法让它与更新的 CSS3 属性一起使用,比如转换、翻译等?这不做那些
2021-04-03 22:34:11
只需要更改var camel = prop.replace(/\-([a-z])/, camelize);var camel = prop.replace(/\-([a-z])/g, camelize);,它就可以很好地工作。谢谢!
2021-04-07 22:34:11

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

在 Safari 中,您可以执行以下操作,这很简洁:

document.getElementById('b').style.cssText = window.getComputedStyle(document.getElementById('a')).cssText;
值得一提的window.getComputedStyle是现在得到了很好的支持:caniuse.com/getcomputedstyle
2021-04-06 22:34:11
谢谢。在更多地研究这个问题之后,这些方法被 jquery 在 css 方法中使用,所以它会重写已经存在的东西。
2021-04-10 22:34:11

我不知道您是否对到目前为止得到的答案感到满意,但我不是,我的也可能不会让您满意,但它可能会帮助其他人。

在思考如何从一个元素“克隆”或“复制”元素的样式到另一个之后,我开始意识到循环遍历 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 被太多错误的想法弄乱。

现在我已经有时间研究这个问题并更好地理解 jQuery 的内部 css 方法是如何工作的,我发布的内容对于我提到的用例来说似乎已经足够好了。

有人建议你可以用 CSS 解决这个问题,但我认为这是一个更通用的解决方案,在任何情况下都可以使用,而无需添加删除类或更新你的 css。

我希望其他人觉得它有用。如果您发现错误,请告诉我。

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

感谢您的起点。