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

2023-12-22

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

例如,与width http://docs.jquery.com/CSS/width,我可以执行以下操作使 2 个 div 具有相同的宽度:

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

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

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

其中不带参数的 .css() 返回一个可以传递给的对象.css(对象) http://docs.jquery.com/CSS/css#properties.

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

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

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

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


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


晚了两年,但我有你正在寻找的解决方案。这是我编写的一个插件(通过以插件格式包装另一个人的函数),它完全符合您的要求,但是得到all所有浏览器(甚至 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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • IE8 忽略 td 宽度,适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7
  • JSON对象的长度[重复]

    这个问题在这里已经有答案了 该函数生成一个包含 json 对象的数组 var estoque function unpack estoque tnm total estoque vl id tid st tnm tnm split tota
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • mouseover 和 mouseout 事件在子进程上触发

    代码 div div div div 如果我将鼠标悬停在Navigation the Drop Downdiv 向下滑动 如果我将鼠标移开 它会向上滑动 问题是如果我将鼠标悬停在孩子上Drop Downdiv它也向上滑 动 有谁知道我该如何
  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数
  • 当条件评估为 true 时获取元素(扩展 ElementArrayFinder)

    我们有一个菜单 表示为ul gt li列表 简化 ul class dropdown menu li class ng scope a href class ng binding Menu Item 1 a li li li ul
  • 如何使用JQuery和Django(ajax + HttpResponse)?

    假设我有一个 AJAX 函数 function callpage ajax method get url abc data x 3 beforeSend function success function html IF HTTPRESPO
  • Cosmos DB 中的 MaxItemCount 源选项属性不起作用

    我正在尝试编写一个运行 SQL 查询的简单存储过程 并且我想通过使用 MaxItemCount 属性来限制结果 查询生成 3 个文档 但我只想返回 1 个文档 我使用 MaxItemCount 属性强制执行此限制 但这似乎不起作用 func
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 支持换行的 JQuery 工具提示

    我正在寻找一个轻量级的 jquery 插件 用于在用户将鼠标悬停在元素上时显示工具提示 我希望插件从标题属性中获取内容 而且我可以创建新行也很重要 任何帮助表示赞赏 在 jQuery 1 9 jquery jquery ui 和标准 too
  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma

随机推荐

  • Chrome 扩展存储自定义对象类型剥离原型方法

    我创建了一个在扩展中使用的自定义对象 当我保存 Group 类型 我的对象类型 的对象 然后将这些对象从存储中取出时 原型方法似乎不再存在 现在我在文档中读到对象序列化为对象文字 我似乎不知道如何将方法与对象保持在一起 我在下面提供了小组课
  • 使用FTS查询,你能找到所有包含'abc'的条目吗

    我是全文搜索新手 如何在以下查询中使用 Contains 而不是使用 like 来执行搜索 Select From Students Where FullName LIKE abc Thanks 就像是 SELECT From Studen
  • 如何在输入字段中使用 PercentPipe

    我正在尝试创建百分比输入字段 我正在使用 PercentPipe 来显示百分比 但是当我输入一些数字时出现错误
  • x?.y?.z 是什么意思?

    规范草案C 中的模式匹配 https onedrive live com redir resid 4558A04E77D0CF5 215396包含以下代码示例 Type v x y z if v HasValue var value v G
  • 如何从 MS Access 迁移到 SQL Server 2005?

    我有一个 VB NET Windows 应用程序 可以从 MS Access 数据库中提取信息 该应用程序的主要作用是从各种格式的 Excel 文件中提取信息 标准化文件布局并将其写入 csv 文件 该应用程序使用 MS Access 作为
  • 使用 IntelliJ 部署启用嵌入式 tomcat 的 spring-boot 应用程序

    我有一个基于 spring boot 的应用程序 使用嵌入式 tomcat 我通过部署时没有问题mvn spring boot run goal but当我尝试使用 intelliJ spring boot 插件进行部署时遇到问题 重要提示
  • innodb_lock_wait_timeout 增加超时时间

    我正在使用 MySQL 数据库并尝试在插入后更新记录 因此出现以下错误ER LOCK WAIT TIMEOUT Lock wait timeout exceeded try restarting transaction 所以我通过以下查询减
  • 如何找到我在 VS Code 中使用的主题的文件夹

    我想自定义我正在使用的主题 如何找到它的文件夹 我想自定义 Atom One Darker 主题 但我找不到它的文件夹app extensions 我怎样才能找到它 As the 文档 https code visualstudio com
  • 提取 xarray 中的坐标值

    我想提取坐标变量的值 例如 我创建一个 DataArray 为 import xarray as xr import numpy as np import pandas as pd years arr range 1982 1986 tim
  • 经典 asp:错误“800a01ad”ActiveX 组件无法创建对象

    Getting 800a01ad ActiveX 组件无法创建对象在 64 位 Windows 7 上运行经典 ASP 应用程序时 我已尝试了所有建议的解决方案 但没有成功 我已在 IIS 应用程序池上启用 32 位 我已经使用C wind
  • android ICS 中的“BasicDream”是什么?

    我看了Launcher源码 版本是ICS 有一个RocketLauncher扩展的类BasicDream 什么是BasicDream 什么可以BasicDream做 我可以找到这条线import android support v13 dr
  • CIFilter输出图像nil

    我正在使用核心图像 并将 CIFilter 棕褐色色调应用于我的图像 我在 viewDidLoad 中运行一次过滤器 然后立即调用另一个再次添加过滤器的函数 由于某种原因 当我尝试访问输出图像时 应用程序崩溃并表示输出图像为零 有谁知道为什
  • WPF ComboBox 下拉菜单阻止单击其他控件

    我有一个像这样的简单表格 我打开组合框 当下拉列表打开时 我单击按钮 单击按钮时 我显示一条简单的消息 但当时未显示该消息 当我再次点击它时它会显示 文本框也有同样的问题 当下拉菜单打开时 文本框单击不起作用 为什么组合框在打开时阻止单击其
  • 如何导出每个键的数据表?

    让我们考虑一下数据表 gt dt data table v1 1 10 v2 c rep a 5 rep b 5 v1 v2 1 1 a 2 2 a 3 3 a 4 4 a 5 5 a 6 6 b 7 7 b 8 8 b 9 9 b 10
  • perl / embperl -- IPC::Open3

    我有一个 perl 和 embperl 两种格式的示例程序 Perl 版本可以作为 CGI 运行 但 embperl 版本则不能运行 任何建议或解决方案的指示将不胜感激 操作系统 Linux 版本 2 6 35 6 48 fc14 i686
  • 在克隆存储库进行构建时,如何让 TeamCity 创建 .git 目录?

    我正在尝试在我的 MSBuild 文件中运行自定义命令 它基本上运行 git log 10 并将提交信息存储到文本文件中 问题是 当我尝试运行构建时 它错误地显示 致命 不是 git 存储库 所以我检查了我的项目的TeamCity的工作目录
  • 浏览器刷新不进行垃圾收集

    我在所有测试过的浏览器上都发现了这一点 Windows 上的 IE Firefox Chrome 和 Safari 以及 Apple 上的 Safari 据称 浏览器刷新 后退按钮或前向链接应该转储浏览器节点以及 JavaScript 变量
  • 在 React 中,如何将动态变量传递给 const CSS 样式列表?

    我在用着反应 dropzone https github com okonet react dropzone允许用户上传个人资料照片 我像这样定义自定义 CSS const dropzoneStyle width 200px height
  • mysql 左连接右表最大值

    我想选择每张只有一条评论的照片 并且我希望该评论是具有最大 ID 的评论 我尝试过以下操作 SELECT p id p title MAX c id c comment FROM tb photos AS p LEFT JOIN tb co
  • 返回元素的计算样式以伪克隆该元素的 jQuery CSS 插件?

    我正在寻找一种使用 jQuery 返回第一个匹配元素的计算样式对象的方法 然后我可以将此对象传递给 jQuery 的 css 方法的另一个调用 例如 与width http docs jquery com CSS width 我可以执行以下