前端Web APIs:操作元素属性

操作元素常用属性

操作元素内容

元素innerText属性

• 将文本内容添加/更新到任意标签位置
• 显示纯文本，不解析标签

元素.innerHTML属性

• 将文本内容添加/更新到任意标签位置
• 会解析标签，多标签建议使用模板字符

举例说明

const info = document.querySelector('.info')
//获取标签内部的字
//console.log(info.innerHTML)
//添加/修改标签内部文字内容
info.innerHTML='嗨喽，俺是<strong>刘德华</strong>~'

总结

设置/修改DOM元素内容有哪2钟方式?

• 元素.innerText属性
• 元素.innerHTML属性

三者的区别是什么?

• 元素.innerText属性只识别文本，不能解析标签元素
• .innerHTML属性能识别文本，能够解析标签
• 如果还在纠结到底用谁，你可以选择innerHTML

修改标签元素属性

还可以通过JS设置/修改标签元素属性，比如通过src更换图片

最常见的属性比如：href、title、src等

语法：

对象.属性=值

举例说明
 

//1.获取元素

constpic=document.querySelector('img')

//2.操作元素
pic.srç='./images/be2.jpg'
pic.title=‘比划比划刚路过路过’

操作元素样式属性

• 还可以通过JS设置/修改标签元素的样式属性。
• 比如通过轮播图小圆点自动更换颜色样式
• 点击按钮可以滚动图片，这是移动的图片的位置left等等

学习路径：

1.通过style属性操作CSS

语法：

对象.style.样式属性=值

举例说明
 

const box = document.querySelector('.box') 
、//修改元素样式 
 box.style.width="288px"

box.style.marginTop=‘15px"

box.style.backgroundColor="blue'

注意：

1修改元素祥式修改样式通过style属性引出

2如果属性有-连接符，需要转换为小驼峰命名法

3.赋值的时候，需要的时候不要忘记加css单位

总结：

1，元素样式属性通过style属性引出来。

2.如果需要修改一个div盒子的样式，比如padding-left,如何写?

>element.style.paddingLeft='300px'

>小驼峰命名法

3.因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位

2，操作类名(className)操作CSS

• 如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。语法：

//active是一个css类名元素
.className ='active'

注意：

• 由于class是关键字，所以使用className去代替
• className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

总结：

1.使用className有什么好处?

可以同时修改多个样式

2.使用className有什么注意事项?

直接使用className赋值会覆盖以前的类名

3.通过classList操作类控制CSS•

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法：

//追加一个类元素
.classList.add('类名')
//删除一个类元素
.classList.remove('类名')
//切换一个类元素.
classList.toggle('类名')

总结

1.使用className和classList的区别?

• 修改大量样式的更方便
• 修改不多样式的时候方便
• classList是追加和删除不影响以前类名