如何使用 javascript 设置 CSS（我无权访问 CSS 文件）？
#fade div {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-ms-transition: opacity 1s;
transition: opacity 1s;
opacity: 0;
position: absolute;
height: 500px;
width: 960px;
}
例如：
document.getElementById('fade').HOW-TO-TYPE-webkit-transition = 'opacity 1s';
你应该看这里：http : //www.javascriptkit.com/javatutors/setcss3properties.shtml
如您所见，使用“-”设置 CSS 属性只会导致下一个字符为大写：
document.getElementById('fade').style.WebkitTransition = 'opacity 1s';
document.getElementById('fade').style.MozTransition = 'opacity 1s';
你应该像这样使用驼峰命名法：
document.getElementById('fade').style.webkitTransition = 'opacity 1s';
就像每个属性由多个单词组成并以连字符分隔（例如 cssbackground-position变成 js backgroundPosition。
可能此时并不是每个浏览器都在涉及浏览器特定前缀的属性中采用这种表示法，所以有一些像 firefox 这样的浏览器仍然接受Moz而不是moz（参见https://bugzilla.mozilla.org/show_bug.cgi?id=607381）
var vendors = [
'-webkit-',
'-o-',
'-moz-',
'-ms-',
''
];
function toCamelCase(str) {
return str.toLowerCase().replace(/(\-[a-z])/g, function($1) {
return $1.toUpperCase().replace('-', '');
});
}
function setCss3Style(el, prop, val) {
vendors.forEach(function(vendor) {
var property = toCamelCase(vendor + prop);
if(p in el.style) {
el.style[p] = val;
}
});
}
用法 ：
setCss3Style(someElement, 'transition', 'opacity 1s');
这个问题的目的现在已经过时了，但原则仍然相关。
在 JavaScript 中，您有两种寻址对象属性的方法：
object.property
object['property']
后一种方法虽然不太方便，但允许使用无效的属性名称，并且还允许您使用变量。
元素样式是元素的样式属性的属性，因此您还有一个选择：
element.style.color
element.style['color']
对于使用点符号无效的属性名称，例如包含连字符，您只能使用第二个符号：
element.style['background-color']
为方便起见，这些麻烦的名称使用camelCase 复制：
element.style.backgroundColor
而且，为了完整性，这也可以使用替代符号：
element.style['backgroundColor']
在那里，您可以选择三个。
通常，任何属性，例如-ms-transition也可以使用以下方法访问：
element.style['-ms-transition']
无需担心如何表达点符号。
并不是说您不再需要担心这些供应商前缀，但该原则仍然适用于其他笨拙的属性。
第一个例子：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#square {
width: 100px;
height: 100px;
border-radius: 5px;
background-color: red;
}
</style>
</head>
<body>
<div id="square"></div>
<script>
var CSS3Error = function () {
return {type: "Erro", message: "Classe não iniciada!"}
}
function CSS3(_property, _values) {
var prefix = ["", "o", "ms", "moz", "khtml", "webkit"], values = _values, started = false, property = _property, prefixKey = 0, propertyValues = "";
this.init = function () {
if (!started) {
started = true;
for (var i = 0, length = prefix.length; i < length; i++) {
prefix[i] += property;
if (prefix[i] in element.style) {
prefixKey = i;
break;
}
}
transitions();
}
}
this.changeStyle = function (element) {
if (started)
element.style[prefix[prefixKey]] = propertyValues;
else
throw new CSS3Error();
}
this.setValues = function (value) {
values = value;
transitions();
}
function transitions() {
propertyValues = "";
if (property == "transition") {
for (var i = 0, length = values.length; i < length; i++) {
propertyValues += values[i];
if (i < length - 1)
propertyValues += ",";
}
}
else
propertyValues = values;
}
};
function Method(_method)
{
var method = _method;
this.delay = function () {
var effect;
setInterval(function () {
if (!effect) {
effect = method;
effect();
}
else
clearInterval(this);
}, 2000);
}
}
var property1 = new CSS3("border-radius", "20px"), property2 = new CSS3("transition", ["all 3s"]), property3 = new CSS3("sdads", "dasds"), element = document.querySelector("#square");
new Method(function () {
try {
property1.init();
property1.changeStyle(element);
property2.init();
property2.changeStyle(element);
}
catch(exception) {
alert(exception instanceof CSS3Error ? exception.type + ": " + exception.message : exception.message)
}
}).delay();
</script>
</body>
</html>
JS 缩小版（968 字节）：
function CSS3(e,t){function n(){if(l="","transition"==a)for(var e=0,t=i.length;t>e;e++)l+=i[e],t-1>e&&(l+=",");else l=i}var r=["","o","ms","moz","khtml","webkit"],i=t,o=!1,a=e,s=0,l="";this.init=function(){if(!o){o=!0;for(var e=0,t=r.length;t>e;e++)if(r[e]+=a,r[e]in element.style){s=e;break}n()}},this.changeStyle=function(e){if(!o)throw new CSS3Error;e.style[r[s]]=l},this.setValues=function(e){i=e,n()}}function Method(e){var t=e;this.delay=function(){var e;setInterval(function(){e?clearInterval(this):(e=t)()},2e3)}}var CSS3Error=function(){return{type:"Erro",message:"Classe não iniciada!"}},property1=new CSS3("border-radius","20px"),property2=new CSS3("transition",["all 3s"]),property3=new CSS3("sdads","dasds"),element=document.querySelector("#square");new Method(function(){try{property1.init(),property1.changeStyle(element),property2.init(),property2.changeStyle(element)}catch(e){alert(e instanceof CSS3Error?e.type+": "+e.message:e.message)}}).delay();
第二个例子：
var rules = "opacity: 0.5; transition: opacity 3s; -o-transition: opacity 3s; -ms-transition: opacity 3s; -moz-transition: opacity 3s; -webkit-transition: opacity 3s", selector = ".transition1", stylesheet = document.styleSheets[0];
("insertRule" in stylesheet) ? stylesheet.insertRule(selector + "{" + rules + "}", 0) : stylesheet.addRule(selector, rules, 0);
document.querySelector("#square").classList.toggle("transition1");
现场演示： https : //jsfiddle.net/mv0L44zy/