如何在JS函数中读取被点击按钮的camera.Orbit自定义属性值

方案实现步骤 #

1. 首先修改按钮的onclick调用，传入当前触发点击的元素对象this：

<button class="Hotspot" onclick="ChangeView(this)" slot="hotspot-1" camera.Orbit='2.895deg 85deg 27.92m'>

2. 调整ChangeView函数逻辑，接收按钮元素参数，读取对应自定义属性赋值即可：

function ChangeView(btn) {
    const modelViewer = document.querySelector('#orbit-demo');
    // 读取当前点击按钮的camera.Orbit属性值
    const orbitVal = btn.getAttribute('camera.Orbit');
    // 赋值前加非空校验避免异常
    if (orbitVal) {
        modelViewer.cameraOrbit = orbitVal;
    }
}

可选优化建议 #

如果要符合HTML自定义属性的标准规范，可以把自定义属性改为data-前缀的格式，例如把camera.Orbit改为data-camera-orbit，对应的读取逻辑可以简化为：

const orbitVal = btn.dataset.cameraOrbit;

这种写法更符合前端规范，也能避免部分特殊属性名的读取异常问题。

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