如何使用JavaScript中的style对象访问和更改transform: translateY(0px);，类似于div.style.background = 50px。我试图使它在我的网页上的标题消失，因为用户向下滚动，但div.style.tranform或div.style.translate似乎不工作。
transform: translateY(0px);
div.style.background = 50px
div.style.tranform
div.style.translate
h9vpoimq1#
可以将任何转换属性作为字符串传递。怎么做？可以这样做;
div.style.transform = "translate(x,y)"
我发现如果我写
div.style.transform = "translate(someValue)"
它只影响x轴。
"translate-y(someValue)" or "translate-x(someValue)"
没有成功或者可以使用rotate属性;
div.style.transform = "rotate(50px)".
试试看!https://jsfiddle.net/araknafobia/4wtxu0dr/1/
yfwxisqw2#
除了可接受的答案之外，还可以分别针对每个轴-例如在以下示例中：
div.style.transform = "translateY(10px)";
同样，括号中的值可以是任何直接在CSS中指定时可以使用的值。
d7v8vwbk3#
不需要通过styles.transform来实现一个 * 翻译 *translate可以独立运行，使代码不那么冗长。
translate: 0px 50px;
div.style.translate = '0px 50px';
Example on codepen
3条答案
按热度按时间h9vpoimq1#
可以将任何转换属性作为字符串传递。
怎么做？
可以这样做;
我发现如果我写
它只影响x轴。
没有成功
或者可以使用rotate属性;
试试看!
https://jsfiddle.net/araknafobia/4wtxu0dr/1/
yfwxisqw2#
除了可接受的答案之外，还可以分别针对每个轴-例如在以下示例中：
同样，括号中的值可以是任何直接在CSS中指定时可以使用的值。
d7v8vwbk3#
不需要通过styles.transform来实现一个 * 翻译 *
translate可以独立运行，使代码不那么冗长。
translate: 0px 50px;div.style.translate = '0px 50px';Example on codepen