js和css动画使用setTimeout()或setInterval()使用这两个函数定时调用一段代码。这是原则。目的是反复修改内联样式，达到动画的效果。通过同时构造一个frame的内容，然后让它在函数的作用下不断改变css的值，达到动画的效果它可以左右移动//第一个参数是元素对象或者元素的id//如果第二个参数是函数，以e为参数，会在动画结束时调用//的第三个参数指定e的移动距离，默认为5像素//第四个参数指定移动多长时间，默认为500毫秒functionshake(e,oncomplete,distance,time){//handlefunctionif(typeofe==="字符串")e=document.getElemnentById(e);//如果传入的是对象的id，则获取对象的id，如果传入的id是元素（元素是对象），则跳过这一句if(!time)time=500;//如果时间为空，则直接使用默认值if(!distance)distance=5;//如果不指定移动距离，则默认为5像素varoriginalStyle=e.style.CSS文本；//获取元素e的css样式e.style.position="relative";//设置为相对定位varstart=(newDate()).getTime();//设置动画开始时间，得到一个GMTanimate();//动画开始//函数检查经过的时间，并更新e的位置//如果动画完成，它将e恢复到原始状态//否则，更新e的位置，安排其重新运行函数animate(){varnow=(new日期()).getTime();//获取当前时间varelapsed=now-start;//自开始以来经过了多长时间varfraction=elapsed/time;//是总时间的一小部分if(fraction<1){//如果动画未完成//计算e的x位置作为动画完成比例的函数//使用正弦函数将完成比例乘以4pi//所以，它会来回两次varx=距离*Math.sin(分数*4*Math.PI);//使用正弦函数实现每秒四帧e.style.left=x+"px";//尝试在25毫秒后或总时间结束时再次运行该函数//目的是每秒生成40帧动画setTimeout(animate,Math.min(25,time-elapsed));//使用天花板函数再次调用，再次移动}else{//否则动画完成e.style.cssText=originalStyle;//恢复原来的样式if(oncomplete)oncomplete(e);//生成回调函数}}}//在毫秒内将e从完全不透明变为完全透明//调用函数假设e是完全不透明//oncomplete是一个可选函数，以e为参数，当它被调用时动画结束//如果不指定时间，默认为500毫秒functionfadeOut(e,oncomplete,time){if(typeofe==="string")e=document.getElementById(e);如果（！时间）时间=500；//使用Math.sqrt作为缓动函数来创建动画//非线性函数，一开始淡出得更快，然后逐渐变慢varease=Math.sqrt;varstart=(newDate()).getTime();//动画开始的时间animate();//动画开始函数animate(){varelapsed=(newDate()).getTime()-start;//经过时间varfraction=elapsed/time;//总时间的一部分if(fraction<1){//如果动画没有完成varopacity=1-ease(fraction);//计算不透明度完成一次变换，平方根e.style.opacity=String(opacity);//设置透明度setTimeout(animate,//继续下一帧Math.min(25,time-elapsed));//25毫秒后或总时间结束时再次调用}else{e.style.opacity="0";//让e完全透明if(oncomplete)oncomplete(e);//最后回调}}}查询计算出的样式getComputedStyle(e)275样式。.O__O"...脚本化的css类不仅可以脚本化内联样式，还可以去除脚本化的css类，addclasse.className="attention";//addclasse.className="";//去除类显示类listclassList只读属性，返回元素类属性的实时集合e.classList()脚本样式表打开和关闭样式表style和link元素的CSSStyleSheet对象定义了一个CSSStyleSheet对象，可以设置并查询了js中的disabled属性，关于disabled属性，这个属性在HTML中不是规范的一部分，在HTML中是不存在的，但是在DOM中是存在的，不能在标签中设置，但是可以设置在scripts中如果值为true则关闭样式表，否则打开样式表e.disabled=true;这样样式表就可以关闭了。同样，document.styleSheets[0].disabled也可以用来查询、插入、删除样式表规则CSSStyleSheet对象也定义了查询、插入、删除样式表规则的api，可以查询所有样式表内容varfirstRule=document.styleSheets[0].cssRules[0];document.styleSheets[0]返回文档链接或嵌入样式表的只读属性。该样式是只读的，不能插入或删除。SelectorText是一个css选择器cssText为css文本样式添加和删除规则insertRule()和deleteRule()。添加和删??除规则有两种方法：addRule()方法insertRule()方法insertRule()和deleteRule()。添加和删??除规则ss.insertRule(".name{color:blue}",0);在ss样式表中，在第0个cssRules中添加一条css规则。使类名的字体变为蓝色。如果添加的索引已经存在，则不会被覆盖。所有索引都会加1，然后插入。deleteRule()方法删除样式规则，删除最后插入的样式ss.deleteRule(0);0规则，样式从0开始继续维护新建一个样式表并不难，直接插入一个新的样式元素，通过innerHTML插入到新的css内容中，或者直接插入link标签，设置添加一个htmlattribute使用Element.setAttritube()方法，将rel的值设置为stylesheet，然后用同样的方法添加src属性纯dom和bom操作，不涉及任何样式表内容
