jQuery 如何使用伪克隆和计算样式来克隆元素样式？-js教程-PHP中文网

jQuery 如何使用伪克隆和计算样式来克隆元素样式？

DDD

发布： 2024-10-22 11:52:02

原创

832 人浏览过

How Can jQuery Clone Element Styles using Pseudo Cloning and Computed Styles?

用于伪克隆元素样式的 jQuery CSS 插件

简介

使用 jQuery 时，有时需要访问和操作计算的样式一个元素的。虽然现有的 jQuery 方法（如 width()）允许轻松操作特定属性，但需要一种更全面的方法来复制和应用所有计算样式。

问题陈述

核心挑战是围绕寻找一个 jQuery 插件或方法，它可以：

返回一个包含第一个匹配元素的计算样式的对象
允许使用 css( ) 方法
促进元素的伪克隆，其中使用不同的标签但保持相同的外观

解决方案

尽管是明显的需求，但现成的用于此任务的 jQuery 插件尚未开发。但是，有一些自定义解决方案可以有效解决此问题。

其中一个解决方案涉及通过覆盖标准 css() 方法的行为来扩展其行为。如果未提供参数，它将返回一个具有所有计算样式的对象。

扩展 CSS 方法：

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;
}

登录后复制

另一个值得注意的解决方案是名为 getStyleObject 的 jQuery 插件。它检索所有可能的样式，包括那些无法通过标准 css() 方法访问的样式：

getStyleObject 插件：

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

登录后复制