在 JavaScript 中访问 -webkit- 供应商前缀

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9438949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 06:41:18  来源:igfitidea点击:

Access the -webkit- vendor prefix in JavaScript

javascriptcsswebkitvendor-prefix

提问by lindhe

If I were writing a JavaScript line to set a style attribute of an element it could look like this (this example: "width"):

如果我正在编写一行 JavaScript 代码来设置元素的样式属性,它可能如下所示(此示例:“宽度”):

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

and if there is a dash in the CSS element it would look like this (this example: "margin-top"):

如果 CSS 元素中有一个破折号,它看起来像这样(这个例子:“margin-top”):

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

But how do I access the prefix -webkit-, if I want to give it a style like this example:

但是-webkit-如果我想给它一个像这个例子这样的样式,我如何访问前缀:

{-webkit-transition: width 1s;}

回答by pimvdb

You have two options:

您有两个选择:

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

The first directly works. The second notation is called camel case, and foo-bar-bazbecomes fooBarBaz. As a result, when a non camel case string starts with -, the first letter is capitalized in camel case.

第一个直接有效。第二种表示法称为驼峰式,并foo-bar-baz变为fooBarBaz。因此,当非驼峰式字符串以 开头时-,第一个字母在驼峰式中大写。

回答by Matt K

If you don't want to keep digging up those pesky style properties and their naming conventions you can always use jQuery to keep it simple.

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

$('#myDiv').css("-webkit-transition", "value");

回答by Sven Bieder

One possibility would to use for example jquery, to make it easy. If you want a pure javascript solution, then read this: http://www.javascriptkit.com/javatutors/setcss3properties.shtml

一种可能性是使用例如 jquery,使其变得容易。如果您想要纯 javascript 解决方案,请阅读:http: //www.javascriptkit.com/javatutors/setcss3properties.shtml