如何使用 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';
【问题讨论】：
标签： javascript css
你应该看这里：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.MozTransition 有效，而 document.getElementById('fade').style.mozTransition 无效
你应该像这样使用驼峰命名法：
document.getElementById('fade').style.webkitTransition = 'opacity 1s';
就像每个由多个单词组成并以连字符分隔的属性一样（例如，css background-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');
【讨论】：
element.style['-webkit-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");
【讨论】：
function reg(){
var style = document.head.appendChild(document.createElement("style"));
style.innerHTML = "#main:after {border-right:400px solid #fde561; left:0 ; transition : 0.5s all ease}";
}
【讨论】：