JavaScript/HTML修改data-*屬性值的方法小結
更新時間：2026年02月12日 08:51:13 作者：Never_Satisfied
本文介紹了JavaScript中修改元素data-*屬性的多種方法,主要推薦使用dataset屬性,它支持駝峰命名并自動轉換為短橫線分隔格式,也可使用setAttribute()直接設置完整屬性名,文章詳細對比了兩種方法,展示了批量修改技巧,并討論了數(shù)據(jù)類型轉換、刪除屬性等注意事項
修改dataset屬性
在 JavaScript 中，有幾種方法可以修改元素的 data-* 屬性值：
1.使用dataset屬性（推薦）
// 獲取元素
const element = document.getElementById('myElement');
// 設置 data-* 屬性
element.dataset.userName = "張三"; // data-user-name
element.dataset.userAge = "25"; // data-user-age
element.dataset.userRole = "管理員"; // data-user-role
// 駝峰命名轉換：
// 在 dataset 中使用駝峰命名，HTML 中自動轉換為短橫線分隔
element.dataset.productCategory = "電子產品"; // data-product-category
2.使用setAttribute()方法
const element = document.querySelector('div');
// 直接設置完整的屬性名
element.setAttribute('data-name', '李四');
element.setAttribute('data-email', 'lisi@example.com');
element.setAttribute('data-職位', '工程師'); // 屬性名可以是中文
// 批量設置多個屬性
element.setAttribute('data-address', '北京市朝陽區(qū)');
element.setAttribute('data-phone', '13800138000');
3.兩種方法的對比示例
<div id="userCard" data-user-id="001" data-user-name="王五">用戶卡片</div>
<script>
const userCard = document.getElementById('userCard');
// 方法1：dataset（修改/添加）
userCard.dataset.userName = "趙六"; // 修改
userCard.dataset.userAge = "30"; // 添加新屬性
userCard.dataset.userEmail = "zhaoliu@example.com";
// 方法2：setAttribute（修改/添加）
userCard.setAttribute('data-user-name', '錢七');
userCard.setAttribute('data-user-department', '技術部');
// 讀取驗證
console.log(userCard.dataset.userName); // "錢七"
console.log(userCard.dataset.userAge); // "30"
console.log(userCard.dataset.userDepartment); // "技術部"
</script>
4.批量修改多個 data-屬性*
// 方法1：使用對象和dataset
function setMultipleDataAttributes(element, dataObj) {
Object.keys(dataObj).forEach(key => {
element.dataset[key] = dataObj[key];
});
}
const user = {
name: "張三",
age: "28",
city: "上海",
department: "市場部"
};
setMultipleDataAttributes(userCard, user);
// 方法2：直接使用Object.assign
Object.assign(userCard.dataset, {
gender: "男",
joinDate: "2020-01-01"
});
5.處理特殊情況和注意事項
const element = document.getElementById('myElement');
// 1. 數(shù)字會自動轉換為字符串
element.dataset.price = 199.99; // 會變成字符串 "199.99"
// 2. 布爾值也會轉換為字符串
element.dataset.active = true; // 會變成字符串 "true"
// 3. 對象需要先序列化
const userData = {
name: "張三",
permissions: ["read", "write"]
};
element.dataset.user = JSON.stringify(userData);
// 4. 讀取時反序列化
const parsedData = JSON.parse(element.dataset.user);
// 5. 刪除 data-* 屬性
delete element.dataset.userName; // 刪除 data-user-name
element.removeAttribute('data-user-age'); // 另一種刪除方式
// 6. 檢查是否存在
if ('userName' in element.dataset) {
console.log('存在 data-user-name 屬性');
}
6.實際應用示例
<div id="product" data-price="100" data-stock="50" data-category="電子">商品</div>
<button onclick="updateProduct()">更新商品信息</button>
<script>
function updateProduct() {
const product = document.getElementById('product');
// 修改現(xiàn)有屬性
product.dataset.price = "89.99"; // 打折
// 添加新屬性
product.dataset.discount = "10%";
product.dataset.tags = JSON.stringify(["熱銷", "新品"]);
// 顯示所有 data-* 屬性
console.log('所有 data 屬性:', Object.entries(product.dataset));
// 更新顯示
product.innerHTML = `
商品信息：
價格：${product.dataset.price}元
庫存：${product.dataset.stock}件
類別：${product.dataset.category}
折扣：${product.dataset.discount}
`;
}
</script>
7.jQuery 方法（如果使用 jQuery）
// 設置 data-* 屬性
$('#myElement').data('userName', '張三');
$('#myElement').data('userAge', 25);
// 或者使用 attr() 方法
$('#myElement').attr('data-user-name', '李四');
// 批量設置
$('#myElement').data({
email: 'zhangsan@example.com',
phone: '13800138000'
});
最佳實踐建議
- 優(yōu)先使用
dataset：更現(xiàn)代、更簡潔，支持駝峰命名 - 保持一致性：盡量使用小寫和短橫線分隔的命名方式
- 數(shù)據(jù)類型注意：所有值都會轉換為字符串，復雜數(shù)據(jù)需要序列化
- 性能考慮：頻繁修改時，dataset 通常比 setAttribute 稍快
選擇哪種方法主要取決于你的具體需求和編碼風格，但在現(xiàn)代 JavaScript 中，dataset 屬性是最推薦的方式。
中文字符支持
在 HTML 的 data-* 屬性中，完全可以存放中文字符，這是完全符合 HTML5 標準的做法。
示例
<!-- 直接在 data-* 屬性中使用中文字符 --> <div data-product-name="中文產品名稱" data-category="電子產品" data-description="這是一個包含中文的描述信息" > 商品信息 </div>
為什么可以？
- HTML5 規(guī)范支持：
data-*屬性的值可以是任意字符串，包括 Unicode 字符（中文屬于 Unicode） - UTF-8 編碼：只要你的 HTML 文檔使用正確的字符編碼（通常是 UTF-8），中文字符就能被正確處理：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 確保有這行 --> <title>示例</title> </head> <body> <!-- 中文字符可以正常使用 --> <div data-info="中文內容">測試</div> </body> </html>
JavaScript 訪問示例
// 獲取含有中文的 data 屬性
const element = document.querySelector('div');
const productName = element.dataset.productName;
console.log(productName); // 輸出: "中文產品名稱"
// 或者使用 getAttribute
const category = element.getAttribute('data-category');
console.log(category); // 輸出: "電子產品"
注意事項
- 確保編碼正確：HTML 文件保存為 UTF-8 格式，并在頭部聲明
<meta charset="UTF-8"> - URL 編碼：如果中文字符出現(xiàn)在 URL 中（比如
data-url），可能需要編碼：
<!-- 中文字符在 URL 中應該編碼 --> <div data-url="https://example.com/搜索?q=%E4%B8%AD%E6%96%87">
- JSON 格式：如果 data 屬性值是 JSON 字符串，確保正確處理中文字符：
<div data-json='{"name":"張三","age":25}'>
總結
- ? 可以安全使用中文字符在
data-*屬性中 - ? 無需特殊轉義（不像 HTML 標簽或屬性名）
- ? 現(xiàn)代瀏覽器完全支持
- ? JavaScript 可以正常讀取和處理
所以放心使用中文字符作為你的 data-* 屬性值吧！
以上就是JavaScript/HTML修改data-*屬性值的方法小結的詳細內容，更多關于JS HTML修改data-*屬性值的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了javascript的事件處理，需要的朋友可以參考下2015-11-11
本文全面解析JavaScript的if...else語句,涵蓋基礎語法、條件表達式轉換規(guī)則、代碼塊最佳實踐、嵌套與邏輯運算符用法、應用場景及性能優(yōu)化技巧,強調其在邏輯控制中的核心地位,并推薦學習資源以提升代碼質量與可維護性,感興趣的朋友跟隨小編一起看看吧2025-09-09
這篇文章主要介紹了js實現(xiàn)帶圓角的多級下拉菜單效果,通過調用封裝的js庫ocscript.js實現(xiàn)圓角下拉菜單功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JavaScript中的模塊化開發(fā)ES6：import與export詳解
JavaScript模塊化通過ES6的import/export實現(xiàn),將代碼拆分為獨立模塊,提升可維護性與復用性,支持命名導出、默認導出及混合導出,模塊異步加載且只執(zhí)行一次,需嚴格模式和正確路徑,打包工具如Webpack可優(yōu)化加載和代碼分割2025-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)上下滑動輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
百度分頁想必大家都知道吧，瀏覽網頁的朋友都應該知道，下面有個小例子使用到了js、ajax等來模仿百度的分頁，感興趣的朋友可以參考下2013-10-10
KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了JavaScript設計模式中的策略模式，對JavaScript設計模式感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了詳解微信小程序input標簽正則初體驗，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Flex通過JS獲取客戶端IP和計算機名的實例代碼，有需要的朋友可以參考一下2013-11-11