如何使用 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 样式从一个元素移动到另一个元素? 的相关文章

  • 带有来自 Selenium 2 / WebDriver 的 Id 的 jQuery 元素选择器

    我可以在 Selenium 中获取元素的 ID RemoteWebElement webElement getId 它返回一个像这样的字符串 e9b6a1cc bb6f 4740 b9cb b83c1569d96d 我想知道这个ID的来源
  • jQuery 验证 - 只显示一条错误消息

    使用 jQuery 验证插件时 有没有办法只显示抛出的最新错误消息 我认为你应该调查一下groups and errorPlacement的选项validate方法 这应该适合你 jQuery 验证 validate 选项 http doc
  • 如何阻止地址自动填充谷歌地点

    所以我在我的表单上有一个谷歌地图自动完成功能 当它到达一个位置时 它会占据该位置并格式化它 以便所有正确的信息都进入表单上的不同输入 我遇到的问题是在 place changed 事件触发自动完成填充输入之前 我想阻止最初的人口 而是填充我
  • 克隆元素对应表单中所有元素的事件

    我成功克隆了表行 其中包含从数据库检索的值 不过我对它没有什么问题 我对所有元素使用了类 因为克隆会重复 ID 不会出现问题 因为它无法唯一地定位每个元素 使每个元素 行在这里唯一的方法是什么 功能如何工作 当第一次选择框时 所选 ID 的
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • Jquery .scrollTop() 不工作

    标题解释了我的问题 这是我的代码 my div ul scrollTop my div ul 0 scrollHeight my div 使用 AJAX 填充 因此 在我的 ajax 请求中 我有一个执行上述代码的成功回调 ajax url
  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的
  • 如何使用 Jquery 或 Javascript 更改原始字符串中的 HTML 属性?

    我想获取一堆锚标记并确保它们全部在新选项卡中打开 我知道我应该做这样的事情 a attr target blank 但问题是我试图修改的 HTML 位于字符串变量中 参见示例 我在一个字符串中有一堆原始 HTML 如下所示 var rawH
  • 防止按住 Shift 键时按下按键

    I m trying to prevent certain keys from being entered into an input box but only if that particular key is pressed whils
  • 如何将一个div的内容克隆到另一个div

    我想使用jquery克隆将选定div的内容复制到另一个div 但我不想将它附加到任何地方 我的意思是 当我们用 jquery 克隆一个 div 时 如果我错了 请纠正我 我们必须设置它的位置 它将动态创建一个显示的新分区 但我想获取所选di
  • 通过 jquery 设置 type="file" 的值[重复]

    这个问题在这里已经有答案了 Note 下面的答案反映了 2009 年旧版浏览器的状态 现在 您实际上可以在 2017 年使用 JavaScript 动态 编程地设置文件输入元素的值 有关详细信息以及演示 请参阅此问题中的答案 如何以编程方式
  • 如何使用开发者工具查找 Chrome 中的按钮或元素运行的代码

    我正在使用 Chrome 和我自己的网站 我从内部了解到的情况 1 我有一个表格 人们可以通过单击这个橙色图像按钮进行注册 2 我检查了它 这就是全部 img class formSend src images botoninscribir
  • ajaxSetup(beforeSend 不起作用

    登录到远程 API 服务器并获取 access token 后 我尝试为所有后续 ajax 调用设置授权标头 done function result console log GOT AUTHORIZATION amplify store
  • Google 登录回调 - 获取姓名和电子邮件

    我试图在登录时将基本的谷歌帐户信息 姓名 电子邮件 ID 捕获到数据库中 我通过为他们的个人资料信息设置变量并通过 AJAX 更新数据库来做到这一点 参见下面示例中的变量 if authResult access token The use
  • 渲染后更改 Fullcalendar 事件源

    我一直在使用 FullCalendar v1 5 3 来替代 MS SharePoint 我正在尝试重新渲染日历事件的源 例如 当页面默认加载时 这是 ajax 调用 日历 事件 feedTasks start 1338094800 end
  • 将对象传递给jquery中的回调函数

    我最近正在开发小型聊天模块 该模块需要不断检查服务器是否有新消息 我正在向服务器发送 ajax 请求 服务器将保持连接 直到找到新消息 长轮询 Code var chatController function other variable
  • JavaScript 附加和前置与 jQuery 附加和前置

    QA Style 我最近读了一篇文章 里面说JavaScript已经实现了append and prepend受 jQuery 启发的方法 这对我来说是一个新知识 因为据我所知 要附加一个元素 我必须使用element appendChil
  • 克隆 jQuery 样式?

    我有一个 span called spn1 它有一些来自内联 CSS 文件的样式 我还有一个 span called spn2 我怎样才能克隆spn1 s complete风格融入spn2 I want spn2看起来完全 风格 像spn1
  • 尝试将 jquery 加载到 tampermonkey 脚本中

    我正在编写一个脚本 在加载登录页面时登录到我的大学网络 代码如下 UserScript name My Fancy New Userscript namespace http use i E your homepage version 0
  • jQuery() 与 jQuery.parseHtml() 空格语法错误

    我有一行 javascript 导致 jQuery 中出现语法错误 document find Container replaceWith data find Content 代码本身如果相当无害的话 它所做的只是从 ajax 调用获取响应

随机推荐

  • 当前 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