javascript 与CSS 交互-8.22

复习

1. 访问指定节点的方法？
2. 查看/修改属性节点？
3. 根据层次关系查找节点?
4. 创建和增加节点?
5. 删除和替换节点的方法?

单词

• className 样式名
• style 样式
• client 客户 当前
• defaultView 默认视图
• getComputedStyle 获取计算的样式
• offset 偏移
• scroll 滚动
• bounding 弹跳
• rect 矩形

本章目标

1. 使用style 设置元素样式
2. 使用className操作元素类名
3. 控制元素位置

知识点讲解

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 // 下

案例讲解

总结

1. 行内样式与电脑计算最终样式获取
2. 各种宽高
3. 各种距离
4. 各种位置