attr修改div自定义属性_自定义attribute

温馨提示：这篇文章已超过287天没有更新，请注意相关的内容是否还可用！

attr()方法用于获取或设置HTML元素的属性值。当使用.attr()方法时，可以传入两个参数，第一个参数是要操作的属性名，第二个参数是要设置的属性值。如果只传入一个参数，则是获取该属性的值。

例如，我们可以使用.attr()方法来修改一个div元素的自定义属性。

我们创建一个div元素，并给它添加一个自定义属性data-id。然后，我们使用.attr()方法来修改该属性的值。

代码示例：


<div id="myDiv" data-id="1">Hello, World!</div>
<script>
  // 获取自定义属性的值
  var value = $("#myDiv").attr("data-id");
  console.log(value); // 输出：1
  // 设置自定义属性的值
  $("#myDiv").attr("data-id", "2");
  var newValue = $("#myDiv").attr("data-id");
  console.log(newValue); // 输出：2
</script>

在上面的示例中，我们首先使用.attr()方法获取了div元素的data-id属性的值，并将其赋值给变量value。然后，我们使用.attr()方法将div元素的data-id属性的值修改为2，并使用.attr()方法再次获取该属性的值，将其赋值给变量newValue。我们分别使用console.log()方法将value和newValue的值输出到控制台。

除了自定义属性，还有一些HTML元素的内置属性，如id、class、style等。这些属性也可以通过.attr()方法进行修改。

代码示例：


<div id="myDiv" class="c2d2-6af5-657e-d4a7 myClass">Hello, World!</div>
<script>
  // 修改id属性的值
  $("#myDiv").attr("id", "newId");
  // 修改class属性的值
  $("#myDiv").attr("class", "newClass");
  // 修改style属性的值
  $("#myDiv").attr("style", "color: red; font-size: 16px;");
</script>

在上面的示例中，我们分别使用.attr()方法修改了div元素的id、class和style属性的值。通过传入不同的属性名和属性值，我们可以灵活地修改HTML元素的属性。

需要注意的是，通过.attr()方法修改属性值时，如果属性不存在，则会添加该属性。如果属性已经存在，则会覆盖原有的属性值。

还可以使用.attr()方法来获取HTML元素的其他属性，如href、src等。通过传入不同的属性名，我们可以获取相应属性的值。

代码示例：


<a href="https://www.example.com">Example Link</a>
<script>
  // 获取href属性的值
  var hrefValue = $("a").attr("href");
  console.log(hrefValue); // 输出：https://www.example.com
  // 获取src属性的值
  var srcValue = $("img").attr("src");
  console.log(srcValue);
</script>

在上面的示例中，我们分别使用.attr()方法获取了a标签的href属性和img标签的src属性的值，并将其输出到控制台。

总结一下，通过.attr()方法可以方便地修改HTML元素的属性值，无论是自定义属性还是内置属性。通过传入不同的属性名和属性值，我们可以灵活地操作HTML元素的属性。我们也可以使用.attr()方法来获取HTML元素的属性值，从而实现更多的功能。

attr修改div自定义属性_自定义attribute

相关阅读