- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个样式表,它像这样设置一个 css 过渡属性(为简洁起见省略了前缀版本):
transition: opacity 1s;
然后我在页面上有一些元素,我想通过JavaScript 修改每个元素的transition-delay
属性,以产生交错效果。我像这样使用 jQuery:
$(element).css('transition-delay', delay + 's');
但是,上面的代码没有向元素添加内联transition-delay: Xs
。相反,它会导致:
<div style="transition: Xs;">
但这很好,因为它按预期工作。不知何故,浏览器知道 transition: Xs
的真正意思是将 transition-delay
设置为 Xs 并保持其余部分不变。
如果我现在通过 $(element).attr('style')
获取该元素的内联样式,然后将其重新应用到该元素,$(element) .attr('style', style)
,HTML 看起来完全一样,但现在过渡已经完全覆盖了其他属性,基本上将元素的过渡值设置为 all Xs 减去 0
。
// HTML before - working
<div style="transition: Xs">
// then I do this
var style = $(el).attr('style');
$(el).attr('style', style);
// HTML after - broken!
<div style="transition: Xs">
正是我所描述的 JSFiddle:http://jsfiddle.net/7vp8m/4/
最佳答案
我认为只是写出问题并编写演示代码确实帮助我找到了答案:
style
属性不是实际样式。我们需要使用 CSSStyleDeclaration 对象尽管看起来内联样式与 style="..."
HTML 属性中包含的任何内容一样简单(正如我所假设的那样),但事实证明这不是案子。在幕后,内联样式(以及所有其他样式)实际上是由一个名为 CSSStyleDeclaration 的对象定义的。 . style
属性中包含的字符串只是代表这个对象,并不包含定义样式所需的所有信息。
这就是设置 `el.style = "width: 100px;"的原因不 工作。来自MDN article on HTMLElement.style :
Except in Opera, styles can not be set by assigning a string to the (read only) style property, as in elt.style = "color: blue;". This is because the style attribute returns a CSSStyleDeclaration object. Instead, you can set style properties like this:
elt.style.color = "blue"; // Directly
var st = elt.style;
st.color = "blue"; // Indirectly
所以这向我们展示了为什么 $(el).attr('style', 'transition: Xs');
将不按预期工作 - 这是正是我遇到的。这样做将修改底层的 CSSStyleDeclaration 对象,但并不总是以我们希望的方式(因此是我最初的问题)。
因此,解决方案是使用 CSSStyleDeclaration 提供的 API。以下 SO 问题证明对我理解这个问题至关重要:JavaScript & copy style
var originalStyle = el.cloneNode().style;
这里我们使用 cloneNode() 方法,因为否则(如果我们只得到 el.style)CSSStyleDeclaration 对象是通过引用复制的,这不是我想要的,因为我将更改元素的内联样式然后我想要稍后恢复原始样式。首先克隆元素允许我们获得 CSSSTLeDeclaration 的“全新”副本,当我们更改元素 el
的内联样式时,它不会改变。
// first we need to delete all the style rules
// currently defined on the element
for (var i = el.style.length; i > 0; i--) {
var name = el.style[i];
el.style.removeProperty(name);
}
// now we loop through the original CSSStyleDeclaration
// object and set each property to its original value
for (var i = originalStyle.length; i > 0; i--) {
var name = originalStyle[i];
el.style.setProperty(name,
originalStyle.getPropertyValue(name),
priority = originalStyle.getPropertyPriority(name));
}
这是我的原始演示的更新版本,它实现了上述方法:http://jsfiddle.net/7vp8m/11/
关于javascript - 使用字符串设置内联 css 过渡样式会改变真实值。奇异的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24943132/
我正在寻找x86 Assembly中pow(real, real)的实现。我也想了解算法的工作原理。 最佳答案 只需将其计算为2^(y*log2(x))即可。 有一个x86指令FYL2X计算y *
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 11 年前。 Improve thi
风格指南的最后一点 http://www.python.org/dev/peps/pep-0008 读... 不要使用 == 将 bool 值与 True 或 False 进行比较。 为什么? 编辑只
我似乎无法完成这件事。我仍然在我的日志中看到 cloudflare IP。目前,我有一个负载均衡器,它位于 Cloudflare 后面。 目前,这是与 forwardfor 相关的块: opt
此代码行选择任何类名不是“id”和“quantity”的 div 内的所有子输入:: $("div.item > div:not(.id,.quantity) > :input").live("key
我在测试真实产品时遇到错误。当我单击购买按钮时,出现错误“此版本的应用程序未配置为市场计费”。 我用这个例子https://github.com/robotmedia/AndroidBillingLi
到目前为止我能找到的所有答案都建议调用 omp_set_num_threads。虽然在大多数情况下这是一个正确的答案,但它对我不起作用。在内部,调用 omp_set_num_threads 会导致创建
假设我有 3 个显示器。如何仅通过其索引获取第二个句柄? EnumDisplayMonitors() 不会工作,因为它也枚举了伪设备,而 EnumDisplayDevices() 没有给我句柄。 最佳
我一直在尝试制作一个简单的小游戏来测试我的逻辑,这是一个简单的迷宫,它很丑,而且到目前为止很糟糕。 引擎工作得很好,考虑到迷宫已经存在(矩阵),它甚至可以愉快,但我无意绘制一堆 map ,这可能是在
Cloudflare 代理包含一个名为 CF-Connecting-IP 的 header 和用户的真实 IP。我想让 traefik 读取这个 header 并用它的内容创建一个 X-Real-Ip
我想要上下文菜单中的不同菜单项,具体取决于我在 JTable 中单击的行 大多数示例并没有真正显示上下文菜单(应该根据上下文 - 所选行进行填充) 我尝试过这个: popupMenu = ne
我有一个对象 callInst。如何获取函数的真实名称而不是 IR 代码中的名称?如果我在我的通行证中运行此代码(Useless 在另一个问题中发布) StringRef get_function_n
我在 Appium 和 iPad 2 上使用了以下所需的功能 DesiredCapabilities capabilities = new DesiredCapabilities(); capabil
根据documentation 我们可以通过以下方式在模拟器上运行我们的 android 项目: cordova 运行 android 或 cordova emulate android 但是如何在真
在 ASP.NET 中,有没有办法获得真正的原始 URL? 例如,如果用户浏览到“http://example.com/mypage.aspx/%2F”,我希望能够获得“http://example.
我的 NSInputStream 遇到问题。这是我的代码: case NSStreamEventHasBytesAvailable: printf("BYTE AVAILABLE\n"
$(selector).click() 结果没有任何反应。 this answer在浏览器控制台中工作,javascript 上下文设置为 iframe,但不是主页: simulateMouseCli
我在我的 AB Micro820 PLC 中设置了 modbus 映射。我在 40001 中有一个数组用于写入,在 42001 中有一个数组用于读取。两者都是 200 个元素和 REAL 类型(32
我正在寻找有关设计契约(Contract)管理数据模型的建议。因此,合约的一般生命周期是: 契约(Contract)已创建并处于“草稿”状态。它可以在内部查看,并且可以进行更改。 契约(Contrac
我正在尝试让我的 WebView fullscreen 达到标准,我知道如何将它拉伸(stretch)到“全屏”,但我想做的是当您长按 WebView 并选择全屏选项时,创建全屏。有谁知道该怎么做?
我是一名优秀的程序员,十分优秀!