摘要：
完全的letbuttomList=document.querySelectorAll（“button”）；letdivObj=文档.querySelector（“div”）；｛letleftLength=divObj.style.left；100）｝｝buttomList[1].onclick=（）=>；id=未定义；
js样式操作
行内式样式操作
//行内式属性的获取 let value = 元素对象.style.属性名; //得到的值为String类型,如果要做算术运算需要转型 //仅能得到行内式属性的值，对于嵌入式、外联式的值无法获取 //属性名需要注意如果在css中唯一个单词则是原单词，如果在css中为多个单词则遵守驼峰命名法 元素对象.style.属性名 = "value"; //为属性赋值的内容也是String
JS-DOM动画-小球水平往返
//<body> // <div style=" position: absolute;top: 50px; height: 100px; 100px; // background-color: brown;left: 100px;"> // </div> // <button>开始</button> // <button>暂停</button> //</body> let buttomList = document.querySelectorAll("button"); let divObj = document.querySelector("div"); let id; //得到客户区宽度 let userWidth = document.documentElement.clientWidth; let flag = 1; buttomList[0].onclick = () => { if(id == undefined){ id = window.setInterval(() => { let leftLength = divObj.style.left; if (parseInt(leftLength) + 100> userWidth) { flag = -1; } leftLength = (parseInt(leftLength) + 50 * flag) + "px"; divObj.style.left = leftLength; if (parseInt(leftLength) < 50) { flag = 1; } }, 100) } } buttomList[1].onclick = () => { window.clearInterval(id); id = undefined; }
内嵌式、外联式样式操作
// 外部操作样式表 //1 CSSStyleSheet 对象对象集合 var styleSheetList = document.styleSheets; //CSSStyleSheet 对象表示一个单独的 CSS 样式表。 //及·html中一个style元素块,或一个连接的外部css文件 //CSS 样式表由 CSS 规则组成，可以通过 CSSRule 对象操作每条规则 //CSSStyleSheet 对象允许您查询、插入和删除样式表规则。 // 2 获取你要操作的样式表对象 var styleObj = styleSheetList[0]; //把单独的样式表提取出来，下标的数值与在文档中的书写顺序有关 // 3 获得style对象的样式规则的集合(数组) var cssRulesList = styleObj.cssRules; //一个样式表中包含一个或多css规则(选择器)，通过cssRules属性将其全部提取出来 // 4 获得CSSStyleRule 样式规则对象 var cssRuleObj = cssRulesList[0]; //去除第一规则(选择器)对象 // 5 通过样式规则对象的style对象对应的属性 var w = cssRuleObj.style.width; //查询提取出来的规则中的属性值 var w = document.styleSheets[0].cssRules[0].style.width; //这是上诉步骤的简写方式 //兼容性 // cssRules 该属性只在 谷歌 和 火狐有效 iE不支持 // rules 该属性只有 iE支持 谷歌支持 但是 火狐不支持 var w = document.styleSheets[0].rules[0].style.width; //使用rules提取出规则集合 var w = document.getElementsByTagName("div")[0].currentStyle.width; //IE //兼容性写法 var styleObjlist = document.styleSheets[0].cssRules ||document.styleSheets[0].rules; var value = styleObjlist.style.width;
最终样式操作
//最终样式的读取 var colorValue = divObj.currentStyle.color; //在Ie中 每个对象（元素） 都有都有一个currentStyle对象 var styleObj = window.getComputedStyle(元素对象); var colorValue = window.getComputedStyle(divObj).color; //火狐中 getComputedStyle(元素) // 操作最终样式 只能是只读的。 divObj.currentStyle.color="blue" (不能写，不能设置值); // 如果要设置值： 请用 元素对象.style.样式属性 = 指 // 兼容性写法 /** * obj: 元素对象 * attrString： 属性名（字符串） **/ function getCssStyle(obj,attrString){ if(document.all){ return obj.currentStyle[attrString]; }else{ return window.getComputedStyle(obj)[attrString]; } } return document.all? obj.currentStyle[attrString] : window.getComputedStyle(obj)[attrString]; //还可以使用三目运算符简写