从0开始学前端 第三十课：元素的样式与属性

第三十课：元素的样式与属性详细

学习目标

在本课中，我们的目标是：

1. 学习如何通过JavaScript获取和设置DOM元素的样式。
2. 理解内联样式与CSS类之间的区别以及它们的使用时机。
3. 学习如何通过JavaScript动态更改元素的CSS类。
4. 熟悉DOM元素的属性，并学会如何读取和修改这些属性。

学习内容

1. 获取和设置元素样式

DOM元素的样式可以通过JavaScript直接获取和设置，这通常用于动态更改页面的外观。

代码示例:

<div id="myDiv" style="color: blue;">蓝色文本</div>

<script>
  // 获取样式
  var myDiv = document.getElementById('myDiv');
  console.log(myDiv.style.color); // 预计输出："blue"

  // 设置样式
  myDiv.style.color = 'red'; // 将文本颜色更改为红色
</script>

2. 使用CSS类控制样式

通过操作元素的className属性或classListAPI，可以更加灵活地控制元素的样式。

代码示例:

<div id="myDiv">这是一段文本。</div>

<style>
  .highlight { color: red; }
</style>

<script>
  // 添加CSS类
  var myDiv = document.getElementById('myDiv');
  myDiv.className = 'highlight'; // 应用highlight类

  // 使用classList API
  myDiv.classList.add('highlight'); // 同样应用highlight类
  myDiv.classList.remove('highlight'); // 移除highlight类
  myDiv.classList.toggle('highlight'); // 切换highlight类
</script>

3. 修改元素属性

元素属性如id, src, href等，可以通过JavaScript进行读取和修改。

代码示例:

<a id="myLink" href="http://example.com">访问示例网站</a>

<script>
  // 获取属性
  var myLink = document.getElementById('myLink');
  console.log(myLink.href); // 预计输出："http://example.com"

  // 设置属性
  myLink.href = 'http://anotherexample.com'; // 更改链接地址
</script>

课后练习

1. 添加一个元素并给它一个内联样式，然后通过JavaScript更改这个样式。
2. 创建一个按钮，当点击时，它会切换页面上一个元素的CSS类。
3. 给一个图片元素添加src属性，并通过JavaScript更改这个属性来切换不同的图片。

练习解析:

1. 这个练习帮助你了解如何通过JavaScript直接操作内联样式。
2. 通过这个练习，你将了解如何使用classListAPI来动态添加、移除或切换元素的CSS类。
3. 修改src属性的练习将展示如何通过JavaScript控制元素的内容，这在创建动态交互式网页时非常有用。

完成这些练习后，你应该能够理解如何通过JavaScript与元素的样式和属性交互，这是前端开发中实现动态用户界面的关键技能。

---

章节目录
第三十一课：创建、插入与删除节点