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];
//还可以使用三目运算符简写