div 中class与className区别

在 HTML 中，我们可以使用 class 和 className 来为元素添加 CSS 样式。它们的区别在于：

- class 是 HTML 属性，用于指定元素的一个或多个类名，多个类名之间用空格分隔。
- className 是 DOM 元素的属性，用于获取或设置元素的类名，可以通过 JavaScript 修改。

例如，下面的代码展示了如何为一个 div 元素添加两个类名：

<div class="box red"></div>

var elem = document.querySelector('.box');
elem.className = 'box blue'; // 将类名从 'red' 改为 'blue'

需要注意的是，通过 className 修改类名时会覆盖原有的所有类名，因此应该先获取原有的类名，再添加或删除需要的类名。

相关问题

HTML中div class

div是HTML中的一个标签，用于定义文档中的一个区块。class是div标签的一个属性，用于定义该区块的样式或功能。通过给div添加class属性，可以方便地对其进行样式或行为的设置。例如，可以定义一个class为“container”的div，用于包含页面中的所有内容，并对其进行样式设置，如背景颜色、边框等。在HTML中，使用class属性的方法为：```<div class="classname">...</div>```。其中，classname为自定义的class名称。

点击div ,两个div的class互换

当你想要点击某个`div`元素并交换它的两个类名时，可以使用JavaScript或者jQuery来实现动态操作。下面是一个简单的示例，假设这两个`div`的id分别为`div1`和`div2`：

// JavaScript 示例
const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');

function swapClasses() {
  // 获取当前的类名
  const currentClass1 = div1.className;
  const currentClass2 = div2.className;

  // 将类名分别赋给对方
  div1.className = currentClass2;
  div2.className = currentClass1;
}

// 给按钮添加点击事件监听器
document.getElementById('swapButton').addEventListener('click', swapClasses);

或者使用jQuery：

<!-- 添加一个触发交换的按钮 -->
<button id="swapButton">点击交换</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
  $('#swapButton').click(function () {
    var className1 = $('#div1').attr('class');
    var className2 = $('#div2').attr('class');
    
    $('#div1').attr('class', className2);
    $('#div2').attr('class', className1);
  });
});
</script>

在这个例子中，当用户点击那个带有"swapButton" id的按钮时，会触发函数，将`div1`和`div2`的类名相互交换。