jQuery CSS 插件返回元素的计算样式以伪克隆该元素? [英] jQuery CSS plugin that returns computed style of element to pseudo clone that element?

问题描述

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

I'm looking for a way using jQuery to return an object of computed styles for the 1st matched element. I could then pass this object to another call of jQuery's css method.

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

For example, with width, I can do the following to make the 2 divs have the same width:

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

如果我可以使文本输入看起来像现有的跨度，那就太好了:

It would be nice if I could make a text input look like an existing span:

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

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

where .css() with no argument returns an object that can be passed to .css(obj).

(我找不到用于此的 jQuery 插件，但它似乎应该存在.如果它不存在，我会将下面的插件转换为插件并将其与我使用的所有属性一起发布.)

(I can't find a jQuery plugin for this, but it seems like it should exist. If it doesn't exist, I'll turn mine below into a plugin and post it with all the properties that I use.)

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

Basically, I want to pseudo clone certain elements but use a different tag. For example, I have an li element that I want to hide and put an input element over it that looks the same. When the user types, it looks like they are editing the element inline.

我也愿意接受其他编辑方法来解决这个伪克隆问题.有什么建议吗?

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

Here's what I currently have. The only problem is just getting all the possible styles. This could be a ridiculously long list.

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 个参数，则返回计算出的样式对象.

I've now been using the code above for awhile. It works well and behaves exactly like the original css method with one exception: if 0 args are passed, it returns the computed style object.

如您所见，如果是这种情况，它会立即调用原始 css 方法.否则，它会获取所有列出的属性的计算样式(从 Firebug 的计算样式列表中收集).尽管它获得了很长的值列表，但速度非常快.希望对其他人有用.

As you can see, it immediately calls the original css method if that's the case that applies. Otherwise, it gets the computed styles of all the listed properties (gathered from Firebug's computed style list). Although it's getting a long list of values, it's quite fast. Hope it's useful to others.

推荐答案

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

Two years late, but I have the solution you're looking for. Here's a plugin I wrote (by wrapping another guy's function in plugin format) which does exactly what you want, but gets all possible styles in all browsers, even 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

希望有所帮助.

这篇关于jQuery CSS 插件返回元素的计算样式以伪克隆该元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！