个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
困境:
在我的 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
我是一名优秀的程序员,十分优秀！