访问JavaScript中的-webkit-vendor前缀

Access the -webkit- vendor prefix in JavaScript

本文关键字：前缀 -webkit-vendor 中的 JavaScript 访问      更新时间：2023-09-26

如果我正在编写一行JavaScript来设置元素的样式属性，它可能看起来像这样（本例："width"）：

document.getElementById('myDiv').style.width="50px";

如果CSS元素中有一个破折号，它看起来是这样的（这个例子："margin-top"）：

document.getElementById('myDiv').style.marginTop="15px";

但是，如果我想给它一个像下面这个例子一样的样式，我该如何访问前缀-webkit-：

{-webkit-transition: width 1s;}

您有两个选项：

  • style["-webkit-transition"]
  • style.WebkitTransition

第一个直接起作用。第二种表示法称为camel大小写，foo-bar-baz变为fooBarBaz。因此，当一个非驼色大小写字符串以-开头时，第一个字母将大写。

一种可能性是使用例如jquery，以使其变得简单。如果您想要一个纯javascript解决方案，请阅读以下内容：http://www.javascriptkit.com/javatutors/setcss3properties.shtml

如果你不想继续挖掘那些讨厌的风格属性及其命名约定，你可以随时使用jQuery来保持简单。

$('#myDiv').css("-webkit-transition", "value");
相关文章：