如何在JavaScript中获取div元素的data-price属性的价格值？

嘿，我来帮你搞定这个问题！从div元素里提取data-price属性的价格值，不同场景下有不同的实用方案，我给你列几个最常用的：

这是前端开发最常用的方式，有两种主要思路：

• 通过dataset属性获取：浏览器会自动把所有data-*属性挂载到元素的dataset对象上，命名会转成驼峰式（比如data-price对应dataset.price）
  示例代码：

  // 单个元素（假设div有id）
  const productDiv = document.getElementById('target-div');
  const price = productDiv.dataset.price; // 结果是字符串格式的价格，比如"99.99"
  
  // 多个元素（比如所有带data-price的div）
  const allPriceDivs = document.querySelectorAll('div[data-price]');
  allPriceDivs.forEach(div => {
    console.log(div.dataset.price);
  });
  

• 直接用getAttribute方法：如果不想纠结驼峰命名，直接通过属性名获取更直接
  示例代码：

  const price = document.getElementById('target-div').getAttribute('data-price');
  

如果你项目里在用jQuery，代码会更简洁：

// 单个元素
const price = $('#target-div').data('price'); // jQuery的data()会自动转换类型，比如数字会变成Number
// 或者用attr()获取原始字符串
const priceStr = $('#target-div').attr('data-price');

// 多个元素
$('div[data-price]').each(function() {
  console.log($(this).data('price'));
});

如果是做网页爬虫提取数据，用BeautifulSoup很方便：

from bs4 import BeautifulSoup

# 假设你已经获取到了目标HTML内容
html_content = '<div class="product-item" data-price="129.99">XX商品</div>'
soup = BeautifulSoup(html_content, 'html.parser')

# 提取单个元素的价格
product_div = soup.find('div', class_='product-item')
price = product_div.get('data-price')
# 转成数字类型（如果需要的话）
price_num = float(price)

# 提取多个元素的价格
all_products = soup.find_all('div', class_='product-item')
all_prices = [float(item.get('data-price')) for item in all_products]

小提示 #

• 注意data-price返回的默认是字符串，如果你需要进行数值计算，记得转成Number（JS）或者float/int（Python）
• 要加个判断，避免元素不存在时报错，比如JS里可以先检查productDiv是否为null，Python里检查product_div是否为None

内容的提问来源于stack exchange，提问作者Salman Srizon