2023年6月20日发(作者：)

DOM的属性和样式⼀，DOM 的属性标签上的属性和对象属性是两组数据，系统默认的标签属性绝⼤多数都是⽀持成为属性。标签默认属性不共通：class 其中name只属于表单元素的系统默认属性。

标签属性的命名规范：所有属性不能使⽤⼤写，都必须是⼩写，单词与单词之间使⽤-连接 属性值必须使⽤字符串，也不⽀持⼤⼩写。 定义标签属性有两种，⼀种直接描述在标签属性上，另⼀种通过js来完成 ribute（"属性名"，"想要设置的属性值"）⽤来设置标签属性 ribute（“属性名”）获取到想要的标签属性。 attribute（“属性名”）删除标签属性。对象属性。对象属性的名称必须是字符串或者symbol型。名称命名规则使⽤变量的规则，也就是驼峰式命名法值可以是任意类型，所有dom的对象属性，除了classname和所有的标签默认属性外， 其他的对象属性都不会在标签上显⽰出来。()来看当前真实的dom对象属性 对象属性 var divs=electorAll("div"); 对象属性的名称必须是字符串或者symbol，命名规则使⽤变量的规则（驼峰式命名） 值可以是任意类型 所有DOM对象的属性,除了className和所有的标签默认属性外,其他的对象属性都不会 在标签上显⽰出来 =1; (div); (div); divs[0].next=divs[1]; divs[1].next=divs[2]; divs[2].next=divs[3]; (divs[0].);常见的DOM 属性！ DOM宽⾼ clientWidth clientHeight 客户宽⾼ offsetWidth offsetHeight 偏移宽⾼ scrollWidth scrollHeight 滚动宽⾼

var div=elector(".div1"); (Width,Height); //width+padding-滚动条宽度 (Width,Height); //width+padding+border (Width,Height); //内容的宽⾼(overflow) (body) ntElement(html) (Width,Height);//页⾯宽度-margin-滚动条宽度，⾼度是内容⾼度 (Width,Height);//页⾯宽度-margin-滚动条宽度，⾼度是内容⾼度 (Width,Height);//页⾯宽度-margin-滚动条宽度，⾼度是内容⾼度 (Width,Height);//页⾯宽度-滚动条宽度，可视区域⾼度-滚动条⾼度 (Width,Height);//页⾯宽度-滚动条宽度，内容⾼度 (Width,Height);//没有滚动条（页⾯宽度-滚动条宽度），有滚动条（内容宽度），（没有滚动条）可视区域⾼度

（有滚动条）内容⾼度

DOM的位置

clientLeft clientTop 客户位置 offsetLeft offsetTop 偏移位置 scrollLeft scrollTop 滚动条位置 var div=elector(".div1"); var div=elector(".div3"); (Left,Top);//边线宽⾼ (Left,Top);//如果⽗容器有定位就是（left和top）值，如果没有定位就是相对上⼀个⽗级容器定位元素的位置 (Left,Top);//滚动条的位置 Left=300; //设置后，滚动位置变化 body (Left,Top);//body没有边线 (Left,Top);//body的margin (Left,Top);//都是0

html (Left,Top);//html没有边线 (Left,Top);//html是最外层 (Left,Top);//window窗⼝滚动条位置⼆，DOM的样式 ⾏内样式 当前元素的⾏内样式 ="50px" ="50px"; oundColor="red"; ="width:50px;height:50px;background-color:red"; 这是典型调⽤dom系统默认标签属性 它可能是两种类型的值，⼀种时字符串，另⼀种对象（CSSStyleDeclaration类型) 字符串类型时，⾥⾯的css属性和style的css属性⼀样，需要使⽤-连接css样式名 对象类型时，⾥⾯的css属性是驼峰式命名法js中⾏内样式的加载顺序先加载css样式–》创建CSS树—》加载js⽂件–》执⾏js⽂件—》创建DOM–》创建DOM树完成–》创建DOM渲染树（DOM树和CSS树合并）获取计算后的样式 获取计算后样式 getComputedStyle(元素,元素伪类) (getComputedStyle(div).width);//IE8⼀下不兼容 ();//IE8以下浏览器 直接获取css样式 (heets[0].cssRules[0].cssText);

2023年6月20日发(作者：)

DOM的属性和样式⼀，DOM 的属性标签上的属性和对象属性是两组数据，系统默认的标签属性绝⼤多数都是⽀持成为属性。标签默认属性不共通：class 其中name只属于表单元素的系统默认属性。

标签属性的命名规范：所有属性不能使⽤⼤写，都必须是⼩写，单词与单词之间使⽤-连接 属性值必须使⽤字符串，也不⽀持⼤⼩写。 定义标签属性有两种，⼀种直接描述在标签属性上，另⼀种通过js来完成 ribute（"属性名"，"想要设置的属性值"）⽤来设置标签属性 ribute（“属性名”）获取到想要的标签属性。 attribute（“属性名”）删除标签属性。对象属性。对象属性的名称必须是字符串或者symbol型。名称命名规则使⽤变量的规则，也就是驼峰式命名法值可以是任意类型，所有dom的对象属性，除了classname和所有的标签默认属性外， 其他的对象属性都不会在标签上显⽰出来。()来看当前真实的dom对象属性 对象属性 var divs=electorAll("div"); 对象属性的名称必须是字符串或者symbol，命名规则使⽤变量的规则（驼峰式命名） 值可以是任意类型 所有DOM对象的属性,除了className和所有的标签默认属性外,其他的对象属性都不会 在标签上显⽰出来 =1; (div); (div); divs[0].next=divs[1]; divs[1].next=divs[2]; divs[2].next=divs[3]; (divs[0].);常见的DOM 属性！ DOM宽⾼ clientWidth clientHeight 客户宽⾼ offsetWidth offsetHeight 偏移宽⾼ scrollWidth scrollHeight 滚动宽⾼

var div=elector(".div1"); (Width,Height); //width+padding-滚动条宽度 (Width,Height); //width+padding+border (Width,Height); //内容的宽⾼(overflow) (body) ntElement(html) (Width,Height);//页⾯宽度-margin-滚动条宽度，⾼度是内容⾼度 (Width,Height);//页⾯宽度-margin-滚动条宽度，⾼度是内容⾼度 (Width,Height);//页⾯宽度-margin-滚动条宽度，⾼度是内容⾼度 (Width,Height);//页⾯宽度-滚动条宽度，可视区域⾼度-滚动条⾼度 (Width,Height);//页⾯宽度-滚动条宽度，内容⾼度 (Width,Height);//没有滚动条（页⾯宽度-滚动条宽度），有滚动条（内容宽度），（没有滚动条）可视区域⾼度

（有滚动条）内容⾼度

DOM的位置

clientLeft clientTop 客户位置 offsetLeft offsetTop 偏移位置 scrollLeft scrollTop 滚动条位置 var div=elector(".div1"); var div=elector(".div3"); (Left,Top);//边线宽⾼ (Left,Top);//如果⽗容器有定位就是（left和top）值，如果没有定位就是相对上⼀个⽗级容器定位元素的位置 (Left,Top);//滚动条的位置 Left=300; //设置后，滚动位置变化 body (Left,Top);//body没有边线 (Left,Top);//body的margin (Left,Top);//都是0

html (Left,Top);//html没有边线 (Left,Top);//html是最外层 (Left,Top);//window窗⼝滚动条位置⼆，DOM的样式 ⾏内样式 当前元素的⾏内样式 ="50px" ="50px"; oundColor="red"; ="width:50px;height:50px;background-color:red"; 这是典型调⽤dom系统默认标签属性 它可能是两种类型的值，⼀种时字符串，另⼀种对象（CSSStyleDeclaration类型) 字符串类型时，⾥⾯的css属性和style的css属性⼀样，需要使⽤-连接css样式名 对象类型时，⾥⾯的css属性是驼峰式命名法js中⾏内样式的加载顺序先加载css样式–》创建CSS树—》加载js⽂件–》执⾏js⽂件—》创建DOM–》创建DOM树完成–》创建DOM渲染树（DOM树和CSS树合并）获取计算后的样式 获取计算后样式 getComputedStyle(元素,元素伪类) (getComputedStyle(div).width);//IE8⼀下不兼容 ();//IE8以下浏览器 直接获取css样式 (heets[0].cssRules[0].cssText);