复习
- 访问指定节点的方法？
- 查看/修改属性节点？
- 根据层次关系查找节点?
- 创建和增加节点?
- 删除和替换节点的方法?
单词
- className 样式名
- style 样式
- client 客户 当前
- defaultView 默认视图
- getComputedStyle 获取计算的样式
- offset 偏移
- scroll 滚动
- bounding 弹跳
- rect 矩形
本章目标
- 使用style 设置元素样式
- 使用className操作元素类名
- 控制元素位置
知识点讲解
4.1 获取/设置元素的行内样式 style
document.getElementById("titles").style.color="#ff0000" ; 对 √
document.getElementById("titles").style.font-size="25px"; 错 ×
| 类别 | 属性 | 描述 |
|---|---|---|
| Padding | padding paddingTop paddingBottom paddingLeft paddingRight |
设置元素的填充 设置元素的上、下、左、右填充 |
| Border | (边框) border borderTop borderBtttom borderLeft borderRight |
设置四个边框所有的属性 设置上、下、左、右边框的属性 |
4.2 获取设置元素的类名className
elem.className="red";
4.3 获取类样式的方法
IE (老 ) 元素.currentStyle.属性;
新浏览器 document.defaultView.getComputedStyle(元素,null).属性;
4.4 获取元素实际的宽/高
elem.offsetHeight / elem.clientHeight;
elem.offsetWidth / elem.offsetHeight;
? 百度 [height、clientHeight、scrollHeight、offsetHeight区别]
http://www.cnblogs.com/youziclub/p/4811069.html‘
4.5 设置/获取窗口 滚动的距离
document.body.scrollTop 滚动条顶部的距离
document.body.scrollLeft 滚动条左边的距离
window.scrollTo 的意思是什么？
4.6 距body的顶部/左边距离
elem.offsetLeft;距 左侧的位置
elem.offsetTop；做 顶部的位置
4.7 距离可视窗口的位置
var react= elem.getBoundingClientRect()
react.left //左
react.rigth //右
react.top // 上
reat.bottom // 下
案例讲解
总结
- 行内样式与电脑计算最终样式获取
- 各种宽高
- 各种距离
- 各种位置
