1.内联样式
可以直接通过style属性获取到当前元素身上的内联样式。
返回的是一个json对象。
对于样式的操作:
对象.style.样式名称(颜色,字体什么什么的)
注意:在JS中设置样式的时候,名称要把中间的连字符去掉,换成后一个字母大写。例如:background-color 要写成: backgroundColor
也可以直接通过下标获取,但是获取的是键的名字
this.style[i]
这里系统也提供了一些方法获取css属性:
1.获取css属性
对象.style.getPropertyValue(“样式名称”);
eg:
this.style.getPropertyValue(“width”);
2.删除css属性
对象.style.removeProperty(“样式名称”);
this.style.getPropertyValue(“width”);
注意:删除的名字一定是css的名字-就是连字符那种名字的。因为是原封不动的匹配
3.设置css属性
对象.style.setProperty(“样式名称”,”值”);
this.style.setProperty(“background-color”,”black”);
注意:删除的名字一定是css的名字-就是连字符那种名字的。因为是原封不动的匹配
外部样式
外部导入:
语法:
< link rel=”stylesheet” href=”css/style.css” type=”text/css”/>
1.获得总的样式集合
document.styleSheets 返回当前的文档一共有多少套样式表,一个style就是一套,一个外部导入也是一套。
var styleType = document.styleSheets ;
2.获取到样式表集合里面的所有样式信息
/*这个[0],表示现在选取的是第一套样式表*/
var csslist = styleType[0].cssRules;
3.获取到css样式 并设置样式表
csslist[0].style.fontSize = "80px";
大体就这3步,记到并熟练使用即可。