如何通过元素ID获取数据属性值并将#result值写入data-price属性？

没问题，这两个前端需求都挺常见的，我来给你拆解清楚具体实现方式：

假设你有一个带数据属性的元素，比如：

<div id="product" data-price="85" data-category="electronics"></div>

要获取它的data-price值，有两种常用方法：

• 方法一：使用getAttribute()
  这个方法兼容性拉满，适配所有浏览器：

  // 先通过ID拿到元素
  const productElement = document.getElementById('product');
  // 获取data-price属性的字符串值
  const priceStr = productElement.getAttribute('data-price');
  // 如果需要数值类型，转成数字即可
  const priceNum = Number(priceStr);
  

• 方法二：使用dataset属性
  这是HTML5新增的简洁API，现代浏览器都支持，写法更清爽：

  const productElement = document.getElementById('product');
  // dataset会自动把data-*属性转成驼峰命名，data-price对应dataset.price
  const priceStr = productElement.dataset.price;
  // 转成浮点型数值
  const priceNum = parseFloat(priceStr);
  

假设你的页面结构是这样的：

<!-- 运行脚本后会持有数值的元素 -->
<div id="result">85</div>
<!-- 需要设置data-price的目标元素 -->
<div id="target-item"></div>

实现步骤很清晰，分两步走：

1. 先获取#result的内容，处理掉冗余空格并转成有效数值
2. 将值写入目标元素的data-price属性

具体代码示例：

// 1. 处理#result的数值
const resultElement = document.getElementById('result');
// 去掉前后空格，再转成浮点型（如果是整数用parseInt也可以）
const targetPrice = parseFloat(resultElement.textContent.trim());

// 2. 设置目标元素的data-price属性
const targetElement = document.getElementById('target-item');

// 方法一：用setAttribute()，兼容性好
targetElement.setAttribute('data-price', targetPrice);

// 方法二：用dataset属性，写法简洁
targetElement.dataset.price = targetPrice;

如果担心#result里的内容不是有效数字，可以加个校验逻辑：

if (!isNaN(targetPrice)) {
  targetElement.dataset.price = targetPrice;
} else {
  console.error('#result中的内容不是有效数字，请检查');
}

内容的提问来源于stack exchange，提问作者Roma Sovach