CSS 转换：从 JavaScript 翻译 Y

Question

如何使用 JavaScript 中的样式对象访问和更改

transform: translateY(0px);

，与

div.style.background = 50px

类似。

我正在尝试让网页上的标题随着用户向下滚动而消失，但是

div.style.tranform

或

div.style.translate

似乎不起作用。

Answer 1

您可以将任何转换属性作为字符串传递。

如何？

可以这样做；

div.style.transform = "translate(x,y)"

我发现如果我写

div.style.transform = "translate(someValue)"

它仅影响 x 轴。

"translate-y(someValue)" or "translate-x(someValue)"

没有成功。

或者你可以使用旋转属性；

div.style.transform = "rotate(50px)".

尝试一下！

https://jsfiddle.net/araknafobia/4wtxu0dr/1/

Answer 2

除了接受的答案之外，还可以单独定位每个轴 - 例如以下示例：

div.style.transform = "translateY(10px)";

同样，括号中的值可以是直接在 CSS 中指定时有效的任何值。

Answer 3

无需通过 style.transform 来实现翻译

translate可以独立存在，使代码不那么冗长，例如

• CSS：

  translate: 0px 50px;

• JS：

  div.style.translate = '0px 50px';

codepen 上的示例

Answer 4

作为 endertunc 答案的补充说明，如果尽管调用了 JavaScript 代码，但变换样式却没有改变，这很可能是字符串的内部语法，因为它非常敏感。例如：

/* ----- JavaScript Style Property ----- */

// First argument is for X, second is for Y; this works:
div.style.transform = 'translate(-50%, -50%)';

// However, this does NOT work [note the whitespace between 'translate' and '(...']:
div.style.transform = 'translate (-50%, -50%)';

我发现的另一个常见的语法错误是忘记或忽略简单的标点符号，例如逗号。另一个例子：

// This works, outputs accordingly:
div.style.transform = 'translate(-50%, -50%)';

// This does NOT work, but you'll get no error feedback upon inspecting the DOM:
// (psst...we are missing the comma between the X and Y of translate!)
div.style.transform = 'translate(-50% -50%)';

如果您想知道为什么会发生这一切，我能给出的最好解释来自 MDN 的网络文档，其中提到样式字符串将被处理并转发到 CSSStyleDeclaration 对象，该对象必须默默地“丢弃”或忽略如果字符串不是解析语法所期望的字符串。您可以通过此链接在 MDN 上找到我所指的内容：MDN Web 文档：HTMLElement：样式属性。

希望这有帮助！