1 .操作css样式最简单的方法，就是使用网页元素节点的getAttribute方法，setAttribute，removeAttribute方法，直接读写或者删除网页的style属性。
1 .div.setAttribute(
'style',
'background-color:red;'+'border:1px solid black;'
)
2 .div.style.backgroundColor="red"
3 .以上两个写法是完全一致的。
4 .div.style.cssText='background-color: red;'
+ 'border: 1px solid black;'
+ 'height: 100px;'
+ 'width: 100px;';
4 .style不仅可以使用字符串读写，而且本身还是一个对象，部署了cssStyleDeclaration接口
cssStyleDeclaration接口
1 .元素节点的style属性
2 .cssStyle实例的style属性
3 .window.getComputedStyle()的返回值，只有这三个地方部署了这个接口，可以直接操作css的样式
改写规则
1 .如果中间有连字符的话，那么要按照驼峰式重写
2 .如果是js的保留字，则规则名之前需要加上字符串css，比如cssFloat。
3 .所有style的属性值都是字符串，设置的时候必须加上单位
3 .el.style返回的只是行内样式，并不是该元素的全部样式，通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。元素的全部样式要通过window.getComputedStyle()得到。
实例属性
1 .style.cssText:读写当前规则的所有样式声明文本。删除一个元素的所有行内样式，最简单的方法就是设置cssText为空字符串。
2 .style.length:返回一个整数值，表示当前规则包含多少条样式声明
3 .style.parentRule:返回当前规则所属的那个样式块，如果不存在样式块，该属性返回null.
实例方法
1 .style.getPropertyPriority():传入一个css样式的属性名作为参数，返回一个字符串，表示有没有设置important优先级。如果有则返回important，否则返回一个空字符串。
2 .style.getPropertyValue():传入一个css样式属性名作为参数，返回一个字符串，表示该属性的值
3 .style.item():接受一个整数值作为参数，返回该位置的css属性名
4 .style.removeProperty()接受一个属性名作为参数，在css规则里面移除这个属性，返回这个属性原来的值。
5 .style.setProperty(name,value,important):注意第三个值，不是必须，如果设置，则该规则使用!importantant规则
css模块检测
1 .检测当前浏览器是否支持某个模块,通常的方法是检测style对象的某个属性值是否为字符串。如果该属性存在，会返回一个字符串，如果不存在，则返回一个空字符串。
function isPropertySupported(property) {
if (property in document.body.style) return true;
var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
var prefProperty = property.charAt(0).toUpperCase() + property.substr(1);
for(var i = 0; i < prefixes.length; i++){
if((prefixes[i] + prefProperty) in document.body.style) return true;
}
return false;
}
2 .css.escape():用于转义css选择器里面的特殊字符
3 .css.supports():用于表示当前环境是否支持某一句css规则
4 。
window.getComputedStyle()
1 .行内样式拥有最高的优先级，改变行内样式，通常会立即反应出来，但是网页元素最终样式是综合各种规则计算出来的。因此，如果想得到元素的实际样式，只读取行内样式是不够的，需要得到浏览器最终计算出来的样式规则。
2 .const app=document.querySelector("#app")
const appstyle=window.getComputedStyle(app)
3 .此处的appstyle是指定节点的最终样式，也就是各种css规则叠加后的结果,比其他方式得来的数据跟可靠
4 .第二个参数，表示当前的伪元素:before,:after,:first_line,:first-letter,
5 .返回的css值都是绝对值，长度是像素单位，返回值包括px后缀。
6 .css的简写形式无效。想要获取margin属性的值，不能直接读取，只能marginLeft，font属性也不能直接读取，只能读取font-size等单个属性。
css伪元素
1 .通过css向DOM添加的元素，主要通过:before和:after选择器生成，content里面指定伪元素的内容。
2 .style对象无法读取伪元素的样式，这个时候需要用到上面的方法
text=document.querySelector("#test")
result=window.getComputedStyle(test,':before').content
color=window.getComputedStyle(test,':after').color
styleSheet
1 .代表网页的一张样式表，包括link元素加载的样式表和<style>元素内嵌的样式表,是一个link一张表么？这个里面的样式也是一张表
2 .用现代框架的话，基本是没有使用这个的空间的。
3 .styleSheet接口不仅包括网页样式表，还包括XML文档的样式表。所以他有一个子类CSSStyleSheet表示网页的css样式表。我们在网页里面拿到的样式表实例，实际上是cssStyle的实例。这个子接口继承了StyleSheet的所有属性和方法
实例属性
1 .s.disabled:返回一个布尔值，表示该样式是否处于禁用状态中，手动设置disabled属性为false。则样式表不会生效，这个属性只能在js脚本中设置，不能再HTML语句中设置。
2 .s.href:返回样式表的网址，对于内嵌样式表，该属性返回null。
3 .s.media属性返回一个类似数组的对象，成员是表示适用媒介的字符串，表示当前样式是用于屏幕，还是打印设备或者手持设备。属性是只读
4 .s.type:通常是text/css
5 .s.parentStyleSheet:css的@import命令允许在样式表中加载其他的样式表，这个属性可以探测到当前表所依赖的父表是哪个。
6 .s.ownerNode:表示styleSheet对象所在的dom节点，通常是link或者style
7 .s.cssRules:指向一个类似数组的对象cssRulesList实例，里面的每一个成员都是当前样式表的一条css规则，使用该规则的cssText属性，可以得到对应的字符串。他的style属性，指向一个对象，用来读取具体的css命令。为什么link引用的没有这个东西。
8 .上面这个是不是实时更新的。
9 .s.ownerRule:如果当前样式表不是通过@import引入的，ownerRule属性返回null.
10 .
实例方法
1 .会用到这么底层的方法么？或者说我在浏览器里面实际改动这个样式表，对用户而言会有优化体验么？这个表会重载么？
2 .CssStyleSheet.insertRule()：在当前样式表插入一个样式。
3 .CssStyleSheet.deleteRule():在当前样式表移除一个样式。
4 .https://wangdoc.com/javascript/dom/css.html具体内容在这个网址
5 .还包括一些查看自适应的一些属性和方法
动态加载css样式
1 .跳到vue按需加载组件。
