从javascript动态修改单个css属性的最有效方法

Question

我是CSS菜鸟。我有一张箭头图像，用于在Google地图上显示用户的标题。我想使用css变换（例如webkit-transform:rotate(15deg);）实时旋转箭头以匹配用户的标题（我从iOS应用程序中提取标题信息;网页只是嵌入在应用程序中）。在javascript更新webkit-transform:rotate(ndeg)属性的最有效方法是什么，考虑到我需要经常更新它以将 n 替换为用户标题的度数？

PS我已经知道如何将iOS应用中的javascript注入网页;对于所有意图和目的，标题信息可能来自其他地方，我只是对等式的javascript方面感兴趣。

Answer 1

您可以在对象上设置CSS样式，如下所示：

img.style.webkitTransform = "rotate(15deg)";

其中img是图像的DOM对象。这非常简单，只需在单个对象上设置单个样式即可。

Answer 2

如jfriend00所述，您可以使用[htmlelement].style.[styleproperty]。使用此页面中的textarea作为示例的两个备注（在浏览器控制台中尝试;〜）：

1. 您还可以使用括号表示法来使用常规css-property：

   document.querySelector('textarea').style['-webkit-transform'] = 'rotate(5deg)';

2. 您可以使用

   恢复原始样式

   document.querySelector('textarea').style['-webkit-transform'] = '';

Answer 3

您可以在对象上设置CSS样式，如下所示：

img.style.webkitTransform = "rotate(15deg)";