如何在HTML中使用data属性名与值，并在OneTrust脚本中完成相关设置

一、自定义data属性的通用识别方法 #

你可以用两种原生JS方法获取data-*属性的值，两种方法兼容性和写法有差异，可以按需选择：

• getAttribute全兼容写法：直接传入完整的属性名即可，兼容所有新旧浏览器，示例：

  // 假设页面元素为 <div id="business-el" data-attribute-id="123" data-attribute-url="https://example.com"></div>
  const targetEl = document.querySelector('#business-el')
  const attrId = targetEl.getAttribute('data-attribute-id') // 取值为'123'
  const attrUrl = targetEl.getAttribute('data-attribute-url') // 取值为'https://example.com'
  

• datasetAPI简洁写法：HTML5标准提供的专用接口，将data-后的短横线命名转为驼峰即可调用，现代浏览器全支持，示例：

  const targetEl = document.querySelector('#business-el')
  const attrId = targetEl.dataset.attributeId // 取值为'123'
  const attrUrl = targetEl.dataset.attributeUrl // 取值为'https://example.com'
  

二、OneTrust脚本中设置属性值的具体实现 #

分两种常见场景实现，可匹配你的业务需求：

场景1：给OneTrust加载脚本本身设置自定义data属性 #

如果需要把自定义属性挂载到OneTrust的script标签上，可在动态创建脚本节点时直接赋值：

// 1. 提前获取自定义属性值，建议放在DOMContentLoaded事件中执行，避免元素未加载
document.addEventListener('DOMContentLoaded', () => {
  const targetEl = document.querySelector('#business-el')
  const otCustomId = targetEl?.getAttribute('data-attribute-id') || 'default-id'
  const otCustomUrl = targetEl?.dataset.attributeUrl || 'https://default.example.com'

  // 2. 创建OneTrust脚本节点
  const otScript = document.createElement('script')
  // OneTrust官方必填属性，替换为你实际的域名ID
  otScript.setAttribute('data-domain-script', 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx')
  // 赋值自定义属性
  otScript.setAttribute('data-attribute-id', otCustomId)
  otScript.setAttribute('data-attribute-url', otCustomUrl)
  // 填写你实际的OneTrust脚本地址
  otScript.src = 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js'
  otScript.charset = 'UTF-8'
  otScript.type = 'text/javascript'

  // 3. 挂载到页面生效
  document.head.appendChild(otScript)
})

场景2：在OneTrust运行逻辑中使用属性值 #

如果需要在OneTrust的初始化回调、同意状态回调等逻辑中使用自定义属性值，直接将提前获取的变量传入对应逻辑即可：

// 提前获取属性值
const pageTrackId = document.querySelector('body')?.dataset.trackId || 'default-track-id'

// OneTrust默认初始化回调函数，脚本加载完成后会自动触发
function OptanonWrapper() {
  // 示例：用户同意分析类Cookie后，将属性值传入数据埋点
  if (Optanon.GetConsentStatusForGroupId('C0002') === 1) {
    window.dataLayer = window.dataLayer || []
    dataLayer.push({
      event: 'ot_consent_granted',
      tracking_id: pageTrackId
    })
  }
}

三、实现校验&避坑建议 #

• 取值时机校验：确保获取data-*属性的逻辑在对应DOM元素渲染完成后执行，若元素是异步渲染的，需等待元素加载完成再取值，避免取到null
• 属性命名校验：自定义data-*属性不要和OneTrust内置属性重名（如data-domain-script、data-language、data-consent-expiry等），避免覆盖官方配置
• 空值兜底校验：所有属性取值后都建议加默认值兜底，避免属性不存在时后续逻辑抛出异常
• 内置API调用校验：如果是给OneTrust的内置配置项赋值，需优先调用OneTrust公开的API传参，不要直接修改OneTrust的内部变量，避免版本更新后逻辑失效

内容的提问来源于stack exchange，提问作者Sriga Devi