在 JavaScript 中更改浏览器特定的 CSS3(前缀)属性

发布于 2025-01-01 08:14:44 字数 749 浏览 7 评论 0原文

所以我试图用javascript动态改变div的样式,这通常没什么大不了的,除了我试图改变一些有前缀的CSS3属性,即名称中的减号(-)...和当然,这意味着完全在 javascript 中的其他东西...

所以我在我的 javascript 中进行了这种操作:

r += 1;
document.getElementById('someDiv').style.transform = "rotate(" + r + "deg)";

并且我的 div 的 style 属性如下所示:

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(50deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */

这样 javascript 就可以很好地更改“transform”属性,但是如何我改变其余的?因为这样做是行不通的:

document.getElementById('someDiv').style.-ms-transform = "rotate(" + r + "deg)";

因为 JavaScript 将“-”读取为语法错误:(

想法?

So I'm trying to dynamically change the style of a div with javascript, which is normally no big deal except that I'm trying to change some CSS3 properties which have a prefix, i.e. minus (-) in the name... and of course, that means something else entirely in javascript...

so I've got this going on in my javascript:

r += 1;
document.getElementById('someDiv').style.transform = "rotate(" + r + "deg)";

and my div's style property looks like this:

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(50deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */

so that javascript works fine to change the "transform" property, but how would I change the rest of them? because doing something like this won't work:

document.getElementById('someDiv').style.-ms-transform = "rotate(" + r + "deg)";

because the javascript reads the "-" as syntax error :(

thoughts?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

穿透光 2025-01-08 08:14:44

将下一个字母改为大写,而不是 -style.MozTransform
(就像 style.backgroundColor

请注意,IE 错误地使用带有小写 mmsTransform

Instead of the -, make the next letter uppercase: style.MozTransform.
(just like style.backgroundColor)

Note that IE incorrectly uses msTransform with a lowercase m.

护你周全 2025-01-08 08:14:44

在 javascript 中,您可以通过两种方式访问​​对象属性:点表示法或数组表示法。特别是当你的属性名称中有特殊字符时,请使用数组表示法:

document.getElementById('someDiv').style['-ms-transform'] = "rotate(" + r + "deg)";

然后你需要确保该属性适合浏览器,我强烈建议你使用 javascript 库,如 jQuery、Mootools 等,如果你想赢得一些时间并防止网络开发人员在使用这些出色的工具之前遇到一些挫败感......

In javascript you can access object property trought two ways : dot notation or array notation. In particular when you have special chars in the property name, use array notation :

document.getElementById('someDiv').style['-ms-transform'] = "rotate(" + r + "deg)";

Then you need to insure that the property is right for the browser, I strongly recommend you to use a javascript lib like jQuery, Mootools, etc if you wana win some time and prevent some frustration that web developpers had before these great tools...

提笔落墨 2025-01-08 08:14:44

使用jquery,只需更改类

 $("p").removeClass("myClass noClass").addClass("yourClass");

Use jquery and just change classes

 $("p").removeClass("myClass noClass").addClass("yourClass");
叫嚣ゝ 2025-01-08 08:14:44

如果您已经有了内联样式,您可以忽略前缀并更改度数。
元素的 style.cssText 是可读可写的。

var sty=document.getElementById('someDiv').style;

sty.cssText= sty.cssText.replace(/rotate\([^)]+/,'rotate(30');

If you already have the style inline you can ignore the prefix and change the degrees.
An element's style.cssText is read and writable.

var sty=document.getElementById('someDiv').style;

sty.cssText= sty.cssText.replace(/rotate\([^)]+/,'rotate(30');
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文