<div class="c f" onclick="fn()" style="border:10px solid #cccheight: 80pxcolor:redbackground:rebeccapurple">我是div</div>
<script>
let div = document.querySelector('div')
/* 通过style在行内样式上获取样式 */
/* 使用style获取样式 写的什么 就能获取到什么
不会转成rgb 和 出现其他的样式 */
console.log('style',div.style.color )
console.log('style',div.style.background )
/* style是获取不到在内部样式上或者外部样式上的样式的 */
// console.log( div.style.color )
// /* font-size js中要是用驼峰的方式获取 */
// console.log( div.style.fontSize )
/* 使用window.getComputedStyle可以获取行内、内部、外部的所有样式
但是 获得color是rbg格式的，获取的background是所有属性 */
console.log( window.getComputedStyle(div,null).color )
console.log( window.getComputedStyle(div,null).fontSize )
console.log( window.getComputedStyle(div,null).background )
console.log( window.getComputedStyle(div,null).height )
// document.onscroll = function (){
// console.log(document.documentElement.scrollTop)
// }
</script>
使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。行内样式(内联样式)即写在html标签中的style属性中，如<div style="width:100pxheight:100px"></div>
内嵌样式即写在style标签中，例如<style type="text/css">div{width:100pxheight:100px}</style>
链接式即为用link标签引入css文件，例如<link href="test.css" type="text/css" rel="stylesheet" />
导入式即为用import引入css文件，例如@import url("test.css")
如果想用javascript获取一个元素的样式信息，首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式，如果一个元素的部分样式信息写在内联样式中，一部分写在外部的css文件中，通过style属性是不能获取到元素的完整样式信息的。因此，需要使用元素的计算样式才获取元素的样式信息。
定义一个id="flower"的div元素 并设置如上样式，目标就是通过javascript来获取样式的最终属性 ；<div id="flower" >...</div>
getStyle函数:
这里用到了三个原型扩展
String.prototype.capitalize 这个方法是让字符串首字母大写
Array.prototype.contains 判断数组中是否有指定成员
String.prototype.camelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式。
