《Web前端基础》课件——任务7：学习DOM模型 元素样式操作.pptx

元素样式操作

操作元素样式的3种方式如下。1通过style属性操作样式循环结构语句通过style属性操作样式通过className属性操作样式通过classList属性操作样式循环语句操作元素样式

操作style属性的示例代码如下。element.style.样式属性名=样式属性值; //设置样式console.log(element.style.样式属性名); //获取样式1通过style属性操作样式元素对象样式属性名的书写需要去掉CSS样式名里的连字符“-”，并将连字符“-”后面的单词首字母大写

style属性中常用的样式属性名如下。名称说明background设置或获取元素的背景属性backgroundColor设置或获取元素的背景色display设置或获取元素的显示类型fontSize设置或获取元素的字体大小height设置或获取元素的高度left设置或获取定位元素的左部位置listStyleType设置或获取列表项标记的类型overflow设置或获取如何处理呈现在元素框外面的内容textAlign设置或获取文本的水平对齐方式textDecoration设置或获取文本的修饰textIndent设置或获取文本第一行的缩进transform向元素应用2D或3D转换1通过style属性操作样式

案例实现步骤首先需要为页面中所有的按钮元素注册鼠标单击事件，然后在事件处理函数中对按钮进行遍历，判断每个按钮是否为当前触发事件的按钮，如果是则改变按钮颜色，如果不是则恢复按钮默认颜色。2【案例】单击按钮改变按钮颜色

2【案例】单击按钮改变按钮颜色使用鼠标单击第3个按钮后的效果如下。

3通过className属性操作样式当为元素对象设置多种样式时，可以操作元素对象的className属性。先将元素对象的样式写在CSS中，利用CSS类选择器为元素设置样式，然后通过JavaScript操作className属性更改元素的类名，从而更改元素的样式。element.className=类名; //设置类名console.log(element.className); //获取类名操作className属性的示例代码如下。

在开发过程中，对于元素中类的操作，我们可以使用元素对象的classList属性。classList属性的使用方式很灵活，可以对元素中的类名进行获取、添加、移除、判断等操作。4通过classList属性操作样式

element.classList通过classList属性获取类名的示例代码如下。4通过classList属性操作样式classList属性返回一个对象，称为classList对象。classList对象是一个伪数组，伪数组中的每一项对应一个类名，可通过数组索引访问类名。TipclassList属性在使用时需要注意IE浏览器的兼容问题，该属性从IE10版本才开始才被支持，且IE10版本中classList属性不能对SVG（可缩放矢量图形）元素进行操作。

classList对象常用的属性和方法如下。名称说明length 获取类名的数量add(class1,class2,…)为元素添加一个或多个class类名remove(class1,class2,…)移除元素的一个或多个class类名toggle(class,true|false)为元素切换class类名，第2个参数是可选参数，设为true表示添加，设为false表示移除，不设置表示有则移除，没有则添加contains(class)判断元素中指定的类名是否存在，返回布尔值item(index) 获取元素中索引对应的类名，索引从0开始4通过classList属性操作样式

THANKYOU!