Access the -webkit- vendor prefix in JavaScript

做~自己de王妃 提交于 2019-12-18 04:44:09

问题


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

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"):

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-transition: width 1s;}

回答1:


You have two options:

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

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




回答2:


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.

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



回答3:


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



来源:https://stackoverflow.com/questions/9438949/access-the-webkit-vendor-prefix-in-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!