示例2,同时操作多个属性的渐变，我们需要用“,”隔开。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>dom Framework</title>
- <script>
- var dom = function(s){
- return document.getElementById(s)
- }
- dom.cssName = function (name){
- var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'],
- rcap = /-([a-z])/g,capfn = function($0,$1){
- return $1.toUpperCase();
- };
- dom.cssName = function(name, target, test){
- target = target || document.documentElement.style;
- for (var i=0, l=prefixes.length; i < l; i++) {
- test = (prefixes[i] + name).replace(rcap,capfn);
- if(test in target){
- return test;
- }
- }
- return null;
- }
- return dom.cssName(name);
- }
- window.onload = function(){
- var el = dom("test"),
- css3transition = dom.cssName("transition");
- el.style[css3transition] = "width 5s ease-in,height 4s linear"
- dom("start").onclick = function(){
- el.style.width = "400px";
- el.style.height = "200px"
- }
- }
- </script>
- <style>
- #test{
- top:1px;
- background: red;
- width:10px;
- height:30px;
- }
- </style>
- </head>
- <body>
- <h1>处理多个属性的渐变 by 司徒正美</h1>
- <div id="test">
- TEXT
- </div>
- <button id="start" type="button">开始测试</button>
- </body>
- </html>
