学习笔记七DOM

DOM对CSS的操作

读取和修改内联样式

1. 使用style属性来操作元素的内联样式

	- 读取内联样式：
		语法：元素.style.样式名
		- 例子：
			元素.style.width
			元素.style.height
			- 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法
				将-去掉，然后-后的字母改大写
			- 比如：background-color --> backgroundColor
					border-width ---> borderWidth

1. 用style修改的是内联 有较高的优先级
   如果在样式中写了 ！important 在js中修改的样式无法生效
2. 用style读取的也是内联样式 不能读取css的 若没有先用style设置 则无法读取

2. 获取元素的当前样式 有px

	- 正常浏览器
		- 使用getComputedStyle()
		- 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
		- 参数：
			1.要获取样式的元素
			2.可以传递一个伪元素，一般传null
		- 例子：
			获取元素的宽度
				getComputedStyle(box , null)["width"];
                getComputedStyle(box , null).width;
		- 通过该方法读取到样式都是只读的不能修改

	- IE8
		- 使用currentStyle
		- 语法：
			元素.currentStyle.样式名
		- 例子：
			box.currentStyle["width"]
            box.currentStyle.width
		- 通过这个属性读取到的样式是只读的不能修改

设置一个函数 让两个都可以用

    // obj：要获取的元素 name：要获取的样式值
    function getStyle(obj, name) {
        // 有这个对象返回true 没有undefine返回false
        // 若不写window去全局找 找不到变量报错
        // 若找不到属性 undefined
        if (window.getComputedStyle) {
            // 对象的属性为变量时 用[]
            return getComputedStyle(obj, null)[name];
        }
        else {
            return obj.currentStyle[name];
        }
    }

实参设置为name 形参传递时 getStyle(obj，“name”);
或者 return (window.getComputedStyle) ? getComputedStyle(obj, null)[name] : obj.currentStyle[name];

3. 获取元素的其他方式

以下属性不带px 只读

clientHeight
- 元素的可见高度，指元素的内容区和内边距的高度
- 不包括border
clientWidth
- 元素的可见宽度，指元素的内容区和内边距的宽度
- 不包括border
offsetHeight
- 整个元素的高度，包括内容区、内边距、边框
offfsetWidth
- 整个元素的宽度，包括内容区、内边距、边框
offsetParent
- 当前元素的定位父元素
- 离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
offsetLeft
offsetTop
- 当前元素和定位父元素之间的偏移量
- offsetLeft水平偏移量 offsetTop垂直偏移量
scrollHeight
scrollWidth
- 获取元素滚动区域的高度和宽度
scrollTop
scrollLeft
- 获取元素垂直和水平滚动条滚动的距离
判断滚动条是否滚动到底
- 垂直滚动条
scrollHeight - scrollTop = clientHeight
- 水平滚动
scrollWidth - scrollLeft = clientWidth
也许需要parseInt

---

滚动条滚到底才可以点击
事件：
onscroll 点击或滚动滚动条

onmousemove 鼠标在元素中移动时

clientX 返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标。
clientY 返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标。
pageX pageY鼠标指针相对于整个网页的水平坐标。滚动条不影响

解决滚动条问题：

1. 将client改为page
2. 加上scrollTop
   var t = document.documentElement.scrollTop||document.body.scrollTop;

滚动条在不同浏览器中默认的父元素不一样

事件的冒泡

- 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
- 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
- 可以将事件对象的cancelBubble设置为true，即可取消冒泡

				元素.事件 = function(event){
					event = event || window.event;
					event.cancelBubble = true;
				};