JavaScript DOM

JavaScript DOM笔记

2 元素的样式操作

2.1 读取行内样式

元素.style.属性名;

注意：

1. 该方式只能读取设置在行内的样式，设置也是把样式设置到行内。
2. 如果CSS属性名中有-会自动映射为小驼峰的形式，如果background-color映射为backgroundColor。

2.2 读取计算样式

getComputedStyle(元素).属性名;

 /**
  * 封装读取计算样式的函数
 */
function getStyle(ele, attr) {
    // 判断
    if (window.getComputedStyle) {
        // IE9 + 以及其他非 IE
        return getComputedStyle(ele)[attr];
    } else if (ele.currentStyle) {
        // IE8 以及以下
        return ele.currentStyle[attr];
    }
}

**注意：**该方式只能读取。

2.3 通过设置元素的类名操作样式

① className

元素.className;

注意： DOM 对象中的className 属性 与 标签中的class 属性对应。

② classList

元素.classList;   // 得到描述元素类名的对象，是所有类名组成的集合，是个伪数组

// classList 对象具有以下三个方法：
元素.classList.add('类名');   // 给元素添加一个类名
元素.classList.remove('类名');  // 删除一个类名
元素.classList.toggle('类名');   // 类名切换（如果元素有该类名就删除，没有该类名就添加）

3 读写元素的文本内容（可读可写）

innerHTML		读写元素中所有的内容（包括内部的html标签）
outerHTML		读写元素自己在内的所有代码内容（包括自己的标签代码）
innerText		读写元素内的文本内容（不包括html标签）（只保留换行）
textContent		读写元素内的文本内容（不包括html标签），保留原格式（缩进和换行）

4 读取元素的尺寸

offsetWidth				盒子的宽度（内容宽+左右内边距+左右边框宽）
offsetHeight            盒子的高度（内容高+上下内边距+上下边框宽）
	
clientWidth				宽度（内容宽+左右内边距）
clientHeight			高度（内容高+上下内边距）

scrollWidth				如果内容没有溢出与clientWidth一致，如果内容溢会加上溢出的内容的宽度
scrollHeight 			如果内容没有溢出与clientHeight一致，如果内容溢会加上溢出的内容的高度

getBoundingClientRect() 返回一个对象，对象中有 width 和 height 属性，获取盒子的尺寸，与offsetWidth/offsetHeight 是一致的	

如何获取视口的尺寸？

// 第一种方式  会包括滚动条本身的宽度
window.innerWidth;
window.innerHeight;

// 第二种方式 不会包括滚动条本身的宽度，推荐
document.documentElement.clientWidth
document.documentElement.clientHeight

5 读取元素的位置（只读）

offsetLeft		元素在第一个定位的祖先元素上的位置，没有定位的祖先元素，参照整个页面。
offsetTop		元素在第一个定位的祖先元素上的位置，没有定位的祖先元素，参照整个页面。

clientLeft 		元素左边框的宽度
clientTop 		元素上边框的宽度

getBoundingClientRect()	返回一个对象，对象中有如下属性读取元素的位置
	left 		元素在视口上的位置，水平坐标
    top 		元素在是扣上的位置，垂直坐标
    x 			同left
    y 			同top
    right		元素右下角的水平坐标
    bottom 		元素右下角的垂直坐标

6 读写元素中内容的位置（可读可写）

scrollLeft		值变大，内容向左滚动，（滚动滑块向右）
scrollTop		值变大，内容向上移动，（滚动滑块向下）