jsp页面通过class或者id获取a标签上的属性的值

2023-12-13 15:28:09

要通过class和id两种方式获取a标签上的某个属性的值，或者给其赋值，可以使用JavaScript。以下是两种方法的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Example</title>
</head>
<body>
  <div class="example" id="target" name="元素名">Element 1</div>
  <div class="example">Element 2</div>
  <div class="example">Element 3</div>
  <a id="target" href="#">Target Link</a>

  <script>
    // 使用document.querySelector获取具有特定类名的元素
    var elements = document.querySelectorAll('div.example');
	//----这里也可以用id来单独获取某一个div
	//var element = document.getElementById("target");
	//var attributeNameValue = element.getAttribute("name");


    // 遍历元素并设置属性值
    elements.forEach(function(element) {
      element.setAttribute('data-custom', 'custom value');
    });

    // 使用document.getElementById获取具有特定id的元素
    var targetElement = document.getElementById('target');

    // 获取属性值
    var attributeValue = targetElement.getAttribute('data-custom');
    console.log(attributeValue); // 输出：custom value

    // 给属性赋值
    targetElement.setAttribute('data-custom', 'new value');
  </script>
</body>
</html>

而实际开发中一般会引入jQuery库，用jQuery来操作元素，获取属性值。
下面是一个完整的例子，演示了如何使用$符号结合.class和#id来获取或设置a标签上的某个属性值：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // 使用.class选择器获取所有具有特定类名的元素
      var elements = $('div.example');

      // 遍历元素并设置属性值
      elements.each(function() {
        var element = $(this);
        element.attr('data-custom', 'custom value');
      });

      // 使用#id选择器获取具有特定id的元素
      var targetElement = $('#target');

      // 获取属性值
      var attributeValue = targetElement.attr('data-custom');
      console.log(attributeValue); // 输出： custom value

      // 给属性赋值
      targetElement.attr('data-custom', 'new value');
    });
  </script>
</head>
<body>
  <div class="example">Element 1</div>
  <div class="example">Element 2</div>
  <div class="example">Element 3</div>
  <a id="target" href="#">Target Link</a>
</body>
</html>

在这个例子中，我们首先引入了jQuery库。然后，在文档加载完成后，我们使用 符号结合 . c l a s s 选择器来获取所有具有 e x a m p l e 类名的 d i v 元素，并为每个元素设置一个名为 d a t a ? c u s t o m 的属性，其值为 c u s t o m v a l u e 。接着，我们使用 符号结合.class选择器来获取所有具有example类名的div元素，并为每个元素设置一个名为data-custom的属性，其值为custom value。接着，我们使用 符号结合.class选择器来获取所有具有example类名的div元素，并为每个元素设置一个名为data?custom的属性，其值为customvalue。接着，我们使用符号结合#id选择器来获取具有特定id（target）的a标签元素。最后，我们分别使用element.attr方法获取和设置该元素的data-custom属性值。

文章来源:https://blog.csdn.net/weixin_43735471/article/details/134573949
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。