<!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>
望采纳！
形象一点说就是，html相当于人里面的器官，组成了人体；而Css就是你穿着的衣服，即使html网页结构相同，但是如果你的css变化的话整个网页也
是可以变化的，而js就是发蜡，香水之类的可以使你的网页更加丰富的脚本语言；整个网页就是人体，衣服，香水发蜡结合的结果了。dom树是根据网页的标签的层级关系来说的,可参考遗传学的那种关系.
换句话说:
html是网页的结构，css是网页的表达形式，JS是脚本语言；
//修改id<script type="text/javascript">
document.getElementsByTagName("div").id = 'newid'
</script>
//修改css
document.getElementsByTagName("div").style.height = '100px'；
document.getElementsByTagName("div").style.width = '100px'；
......
