但我们经常会听到js操作css或者脚本化css的说法，那是怎么回事呢？
其实，DOM中提供的方法能操作HTML的所有内容，其中包括能操作元素的属性，而元素的属性中又恰好包含style属性，style属性表示的是该元素行间样式，而且行间样式的权重是1000。所以一般我们通过DOM操作元素的属性style就间接的改变了该元素的CSS样式。
DOM操作CSS样式其实质是通过DOM控制行间样式，从而达到改变样式的效果。这只能说间接的操作CSS，并非真实的直接操作CSS文件
通过DOM元素的style读写CSS行间样式
格式：ele.style.prop
注：
1. 可读可写行间样式，没有兼容性问题
2. 碰到保留字属性，前面应添加css；例如：float-->cssFloat
3. 复合属性必须拆解
4. 组合单词变成小驼峰式
5. 写入的值必须是字符串格式
用法比较简单，我们深入看看style吧
先随便来两个元素，并选中
我们发现，dom元素的原型的原型都是HTMLElement。于是猜测，style就是定义在HTMLElement的原型链上，所以凡是DOM元素都有style属性。
通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上
明白style定义在哪里之后，再来看style里面是什么？
目前也只有这种方式能修改CSS样式。
下面再来了解查询样式的方式：
window.getComputedStyle(ele,null)
IE使用另外一直方式代替
ele.currentStyle
最后我们封装一个所有浏览器都能用的方法：
1.都没有配置：立即执行，阻塞DOM的解析2.<srcript async />: Dom加载和渲染后续文档与js的加载和执行异步关系
3.<srcript defer />: Dom加载和渲染后续文档与js的加载异步关系， js的加载要在dom解析之前完成(DOMContentLoaded)
所以js不同情况下会阻塞Dom的解析和渲染，需要放置尾部；
页面渲染需要css解析生成的cssom再和dom生成renderTree,才能交给渲染引擎进行计算渲染
代码如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="http://pu-datacastle.oss-cn-qingdao.aliyuncs.com/master.third.source/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<style>
*{
/*margin: 0px
padding: 0px*/
}
.test1{
width: 100%
height: 22px
line-height: 22px
border: 2px solid #ccc
}
</style>
</head>
<body>
<div class="test1">公告内容</div>
<br />
<button class="changestyle">更改样式</button>
<script>
$(function(){
$(".changestyle").off("click").on("click",function(){
$(".test1").css({
"font-size":"16px",
"font-weight":"bold",
"border":"2px solid blue",
"width":"200px",
"height":"100px",
"text-align":"center",
"line-height":"100px",
"color":"red"
})
})
})
</script>
</body>
</html>
望采纳！
