gpt4 book ai didi

javascript - 使用字符串设置内联 css 过渡样式会改变真实值。奇异的

转载 作者:太空狗 更新时间:2023-10-29 15:55:52 26 4
gpt4 key购买 nike

我有一个样式表,它像这样设置一个 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/

这是怎么回事?

最佳答案

我认为只是写出问题并编写演示代码确实帮助我找到了答案:

HTML 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

复制 CSSStyleDeclaration:

var originalStyle = el.cloneNode().style;

这里我们使用 cloneNode() 方法,因为否则(如果我们只得到 el.style)CSSStyleDeclaration 对象是通过引用复制的,这不是我想要的,因为我将更改元素的内联样式然后我想要稍后恢复原始样式。首先克隆元素允许我们获得 CSSSTLeDeclaration 的“全新”副本,当我们更改元素 el 的内联样式时,它不会改变。

用保存的 CSSStyleDeclaration 替换当前的内联样式

// 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com