gpt4 book ai didi

webkit - -webkit-transform 和适应级联(如何不覆盖以前的设置)

转载 作者:行者123 更新时间:2023-11-28 10:07:17 28 4
gpt4 key购买 nike

困境:

在我的 CSS 文件中,我有这个:

div {
-webkit-transform: scale(0.5);
}

在我的 jQuery 中,我稍后会这样做:

$('div).css('-webkit-transform','rotate(3deg)')

发生的事情(正如您可能猜到的那样)是通过 jQuery 内联设置 -webkit-transform 覆盖了原始设置。通常这很好/预期。但这里的问题是,我实际上设置了两种完全不同的样式(缩放和旋转),但由于 webkit 如何对两者使用相同的属性名称,一个“覆盖”了另一个。

谁能想出一种优雅的方式来处理这个问题?我能想到的最好的办法是提出一个 jQuery 函数,该函数将解析此特定样式并附加到/从逗号分隔的值列表中减去(类似于删除/添加类)。但是,如果要动态更新所有具有不同转换的嵌套元素,那仍然可能是一个挑战。 (例如,我有一个包装器 DIV,我希望将其应用到(及其子项)。其中一个子项也需要进行旋转,但仍保留比例)。

更新:

经过进一步调查,这似乎不一定是 DOM 更新问题,而只是一个奇怪的 CSS 级联问题。

示例代码:

<html>
<head>
<style>
#parentSpan {
-webkit-transform: scale(.25);
}
</style>
</head>
<body>
<span id="parentSpan" style="
display: block;
border: 1px solid orange;
width: 600px;
-webkit-transform: rotate(5deg);
">
hello
</span>

我在 HEAD 中设置缩放样式,然后内联旋转样式。内联旋转完全覆盖了比例,因为它们都是“-webkit-transform”属性。事情就是这样吗?

更新 2:

我想我有一个解决方法。

事实证明,我不认为这是一个继承问题。我上面的例子是覆盖了转换声明,而不是添加到(继承)。

解决方法似乎是添加一些额外的标记。将缩放变换应用于包装器 div,然后将旋转变换应用于子 div。然后,该子 div 将进行旋转,并且由于父级被缩放,也会在视觉上缩小。

最佳答案

是的,这就是 CSS 应有的工作方式,您正在使用稍后/更具体的定义覆盖 -webkit-transform 属性。你可以尝试这样的事情:

$('div').css('-webkit-transform', $('div').css('-webkit-transform') + ' rotate(3deg)')

或者您可以为已经具有转换集的 div 做一个特例。

关于webkit - -webkit-transform 和适应级联(如何不覆盖以前的设置),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5248075/

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