当前位置：首页 > news >正文

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

news 2025/7/28 16:47:12

要通过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 ss 选择器来获取所有具有 e x am pl 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 。接着，我们使用$ 符号结合#id选择器来获取具有特定id（target）的a标签元素。最后，我们分别使用element.attr方法获取和设置该元素的data-custom属性值。