如何使用 JavaScript 将所有计算的 CSS 样式从一个元素移动到另一个元素?

2023-11-25

我有一个外部样式表,它将某些样式应用于给定元素。我希望能够将这些样式(使用 JavaScript)完全移动到不同的元素,而无需事先了解正在应用的样式。

The CSS:

td { padding: 5px }
div { }

HTML:

<td>
    <div>
        Apply the TD styles to this DIV (instead of the TD).
    </div>
</td>

JavaScript:

$(document).ready(function(){
    $('tr').children('td').each(function(){
        //move the td styles to div
    });
});

我怎样才能实现这个目标?

Update:需要明确的是,我无法控制 CSS。我无法知道可以应用什么样式。我试图解决的问题是能够获取一个元素并复制其样式(可能未知)并将它们应用到不同的元素。


这是我想出的一个解决方案,它混合了 document.defaultView.getCompulatedStyle 和 jQuery 的 .css():

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >            </script>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div id="test" style="background-color: #FF7300">
        <p>Hi</p>
    </div>
    <a href="#" id="button">Apply styles</a>
    <script>
        $("#button").click(function() {
            var element = document.getElementById("test");
             $("#victim").css(document.defaultView.getComputedStyle(element, null));
        });
    </script>
    <div id="victim">
        <p>Hi again</p>
    </div>
</body>

//style.css 
#test {
    border: 3px solid #000000;
}

它的作用是复制计算的样式对象,包括 style.css 和内联样式,并使用 jQuery 的 .css() 将其设置到另一个 div

我希望我没有误解这个问题,这就是您所需要的。

编辑:我忘记的是您要求“移动”样式而不是复制它。使用 jQuery 的 .removeClass() 和使用 .attr() 删除 style 属性从前一个 div 中删除样式非常简单,但您必须记住,如果有任何样式规则应用于元素的 ID,则有没有办法阻止它们被应用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 JavaScript 将所有计算的 CSS 样式从一个元素移动到另一个元素? 的相关文章

  • 如果未选中复选框,jquery 清除输入字段

    我有以下 jquery 如果选中复选框 用户可以填写表单中的其他字段 我想要的是如果未选中该复选框 则清除附加输入字段值 document ready function input checkbox attr checked false x
  • 在弹出警报框之前将其删除[重复]

    这个问题在这里已经有答案了 我正在尝试使用 Grease Monkey 和 jQuery 删除外部站点上的警报框 HTML p Hello world p GreaseMonkey 脚本 目前没有 jQuery 部分 UserScript
  • 获取点击元素的 HTML 内容 jQuery

    我有以下 HTML
  • jquery ajax可以调用外部webservice吗?

    jquery ajax代码可以调用吗网络服务来自另一个域名或另一个网站 像这样 ajax type POST url http AnotherWebSite com WebService asmx HelloWorld data name
  • jQuery stopPropagation 不起作用

    我正在使用以下内容选色器 https github com meta100 mColorPicker blob master javascripts mColorPicker js它工作正常 但是当我单击颜色选择器图标时 我不希望它冒泡到主
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • 防止jsTree节点选择

    我正在使用 jsTree 插件列出文件系统中的文件夹 我需要防止用户在满足特定条件之前更改到另一个节点 下面的代码不会停止传播 我看到了一些使用其他插件的解决方案 但这是一个简单的任务 没有其他插件它一定是可能的 jstree on sel
  • 使用 jQuery 检查输入是否为空

    我有一个表单 我希望填写所有字段 如果单击某个字段然后未填写 我想显示红色背景 这是我的代码 apply form input blur function if input text is empty this parents p addC
  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • javascript中输入类型时间的值

    我有这个html
  • 支持换行的 JQuery 工具提示

    我正在寻找一个轻量级的 jquery 插件 用于在用户将鼠标悬停在元素上时显示工具提示 我希望插件从标题属性中获取内容 而且我可以创建新行也很重要 任何帮助表示赞赏 在 jQuery 1 9 jquery jquery ui 和标准 too
  • 第三个下拉菜单不从数据库填充

    我有以下 Index php
  • defaultDate 选项与 setDate 方法之间的差异

    我正在尝试使用jQueryUI DatePicker 我必须了解的主要事情之一是在页面加载时设置日期的方式 经过一些研究后 我发现有两种不同的方法可以做到这一点 using defaultDate option using setDate
  • 如何发送正确的授权标头以进行基本身份验证

    我正在尝试从 API 发布数据 但无法通过基本身份验证 I try ajax type POST url http theappurl com api v1 method data crossDomain true beforeSend f
  • 自动建议 php 的 ajax

    我有一个 html 表单 php 脚本和 jquery 我需要一个 ajax 代码来从我的 php 脚本中进行自动建议 以下是代码 表单 html
  • 从 HTTP 登录到 HTTPS

    我的网站默认使用 HTTP 我确实有一个启用 HTTPS 的证书 但只有其上的某些区域强制建立安全连接 登录是通过 Ajax 处理的 我想开始使用 SSL 即使请求来自 HTTP 我尝试强制请求的地址具有 HTTPS 并且它完美地回复 然而
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u

随机推荐

  • 当前 Android Google Spreadsheet API 编写示例

    我正在寻找一个编写 Google 电子表格并从 Android 向其中添加行的示例 到目前为止 我发现的所有示例都已过时 仅包含身份验证 或仅列出文档 电子表格 不包含任何写入 您知道创建电子表格并向其中添加行的任何示例吗 以下是适用于 G
  • Java TreeMap 比较器

    我需要一个 TreeMap 的比较器 我应该在 TreeMap 的构造函数中匿名编写此代码吗 我还能怎么写我的比较器 目前 Java 不喜欢我的代码 我可以匿名执行此操作吗 SortedMap
  • 如何为另一个数据库执行存储过程?

    我有一个存储过程 应该能够在我的 MS Sql Server 上的任何数据库的任何表上执行 大多数 EXEC 和 USE 语句的组合不会产生任何结果 这是存储过程 CREATE PROCEDURE dbo usp TrimAndLowerC
  • R 成对乘积

    我正在尝试获取向量的成对乘积 例如 a c 1 2 3 4 我想要得到的是 2 3 4 6 8 12 按顺序 我尝试过使用外部 outer 1 4 2 4 这给了我一个矩阵 其中包含我想要的产品 但我不确定如何以缩放到更高维度向量的方式从矩
  • 在具有大型 C 文件的 vim 中启用语法和语法折叠会导致完成速度变慢

    当我在一个大的 C 文件 大约 8000 行中有语法时 完成ctrl p和ctrl n非常慢 超过20 当我关闭语法时 完成时间不到一秒钟 我找到了重现这种行为的最小方法 使用空的 vim 文件夹并创建仅包含以下行的 vimrc set s
  • 如何让CSV阅读器读取内存文件?

    我正在尝试将整个文件提取到内存中 完成 使用 StringIO 但据我所知 这些对象的行为并不完全像 真实 文件 我得到了整个内容 或者我可以读取一次一行 但我不知道如何应用此模式 import csv with open MYMEMORY
  • 如何使用 simple_form 生成 input[type=date]?

    当我做f input start date as date我得到 3 个选择元素 日 月和年 我可以f input start date as string to get input type text 元素 但我怎样才能生成input t
  • 订阅或绑定现有的Intent服务

    我有一个应用程序 它的初始活动会在列表视图中列出一些文件 单击列表中的某个项目时 您将看到该特定文件的详细活动 在详细视图中 我有一个名为下载的按钮 当您单击下载时 它会启动一个 IntentService 该 IntentService
  • 第一次使用 MongoDB + Docker - 从 docker compose 设置

    我想尝试一下project我在 GitHub 上找到了 所以我在 MacOS 上安装了 MongoDB 现在我试图了解如何通过目录中的 docker compose 文件正确设置它 这是泊坞窗文件 version 3 services re
  • 代码完成不适用于远程文件(使用 RSE)

    What is 在主机上 Windows 7的 面向 PHP 开发人员的 Eclipse版本 Helios 服务版本 2 在访客机器上 Linux Debian 挤压 我想使用 RSE 在 Eclipse 中通过 SSH 编辑我的远程项目
  • 我什么时候应该使用 Perl 的 AUTOLOAD?

    In Perl 最佳实践 AUTOLOAD 部分的第一行是 不要使用自动加载 然而 他描述的所有案例都涉及面向对象或模块 我有一个独立的脚本 其中一些命令行开关控制定义特定函数的哪些版本 现在我知道我可以将条件和评估放在文件顶部 然后再进行
  • 您可以覆盖 scala @serialized 对象中的流编写器吗?

    我现在明白了 scala serialized 对象可以像 Java Serialized 对象一样使用 在 Java Serialized 对象中 您可以重写一些方法来更改对象的流式传输方式 writeObject ObjectOutpu
  • 如何在 JavaScript 中使用 ISO 8601 格式化带有时区偏移的日期?

    Goal 找出local time and UTC time offset然后按以下格式构造 URL 示例网址 Actions Sleep duration 2002 10 10T12 00 00 05 00 该格式基于W3C 推荐 文档说
  • 将 Cassandra BoundStatement 的 ResultSet 映射/转换/转换为使用对象映射 API 构建的 Java 类的最有效方法是什么?

    DataStax Java for Apache Cassandra 中是否有内置方法可以将来自 BoundStatement 的 ResultSet 映射到使用对象映射 API 构建的域对象 Java 类 我是从 Mapper Acces
  • div 清除后 IE 中的额外垂直空间

    我通过左浮动创建了一个简单的 div 网格 并在每行末尾创建了一个空的 div 这在 Firefox 中工作正常 但在 IE 中我在行之间获得了额外的垂直空间 我尝试应用 clearfix 方法 但我一定做错了什么 为什么 IE 会插入多余
  • 跟踪 Python 导入

    我的 Python 库刚刚更改了它的主模块名称foo bar to foobar 为了向后兼容 foo bar仍然存在 但导入它会引发一些警告 现在 似乎一些示例程序仍然从旧模块导入 但不是直接导入 我想找出错误的地方import陈述 有没
  • U后缀的含义

    后缀 或后缀 有什么作用U以下值的平均值 0U 100U 它代表unsigned 声明常量时 还可以指定其类型 另一个常见的例子是L 这代表long 并且您必须将其放置两次才能指定 64 位常量 例子 1ULL 它有助于避免显式强制转换
  • 如何打乱 ArrayList [重复]

    这个问题在这里已经有答案了 我需要一些帮助来编写一个对 ArrayList 进行洗牌的方法 我不知道该在我的方法中放置什么 这是我到目前为止所拥有的 我尝试使用随机方法来随机化列表中的整数 但这不起作用 有人可以告诉我该怎么做吗 这是我尝试
  • 随机数生成最安全的种子是什么?

    为随机数生成器提供种子的最安全的熵源是什么 这个问题与语言和平台无关 适用于网络上的任何机器 理想情况下 我正在寻找云环境中的机器或托管公司提供的服务器可用的资源 有两个重要的弱点需要记住 使用时间发送随机数生成器违反了CWE 337 使用
  • 如何使用 JavaScript 将所有计算的 CSS 样式从一个元素移动到另一个元素?

    我有一个外部样式表 它将某些样式应用于给定元素 我希望能够将这些样式 使用 JavaScript 完全移动到不同的元素 而无需事先了解正在应用的样式 The CSS td padding 5px div HTML td div Apply