Как установить CSS с помощью javascript (у меня нет доступа к файлу 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 Properties с помощью "-" просто приводит к тому, что следующий символ станет капиталом:
document.getElementById('fade').style.WebkitTransition = 'opacity 1s';
document.getElementById('fade').style.MozTransition = 'opacity 1s';
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');
вы должны использовать обозначение camelCase следующим образом:
document.getElementById('fade').style.webkitTransition = 'opacity 1s';
как и каждое свойство, состоящее из более чем одного слова и дефиса (например, css background-position превращается в js backgroundPosition.
Вероятно, в это время не каждый браузер использовал эту нотацию в свойствах с использованием определенных браузеров префиксов, поэтому есть некоторый браузер, такой как firefox, все еще принимающий Moz вместо Moz (см. https://bugzilla.mozilla.org/show_bug.cgi?id=607381)
Первый пример:
<!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 Minified (968 bytes):
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/
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}";
}