用javascript添加控件自定义属性解析

下面是一份关于用JavaScript添加控件自定义属性解析的攻略：

自定义属性

在HTML标签中，我们可以添加自己的属性，这些属性也被称为自定义属性。这些自定义属性一般不会被浏览器识别和解析，但是在JavaScript中，我们可以通过getAttribute和setAttribute方法来获取和设置这些自定义属性的值，从而实现一些我们想要的效果。

添加自定义属性

我们可以通过在HTML标签中添加自定义属性来起到我们想要的效果。

<button class="my-button" data-action="submit">提交</button>

在上面的代码中，我们在button标签中添加了一个名为data-action的自定义属性，并且给它赋了一个submit的值。在JavaScript中，我们可以通过getAttribute方法来获取这个自定义属性的值。

获取自定义属性的值

我们可以使用getAttribute方法来获取自定义属性的值：

const button = document.querySelector('.my-button');
const action = button.getAttribute('data-action');
console.log(action); // 输出：submit

在上面的代码中，我们首先通过querySelector方法获取到了class为my-button的按钮，然后使用getAttribute方法获取了这个按钮的data-action属性的值，并将其打印到控制台上。

与getAttribute方法相对应的是setAttribute方法，我们可以通过它来设置自定义属性的值：

button.setAttribute('data-action', 'save');
const updatedAction = button.getAttribute('data-action');
console.log(updatedAction); // 输出：save

在上面的代码中，我们使用setAttribute方法将data-action属性的值修改成了save，并且通过getAttribute方法获取到了这个修改后的值。

示例1 - 根据自定义属性添加点击事件

可以在HTML标签中使用自定义属性来添加一些额外的信息，例如data-action="submit"。这时我们可以编写一段JavaScript代码，通过获取这个自定义属性的值并为按钮添加一个点击事件来达到我们的目的。

<button class="my-button" data-action="submit">提交</button>
<button class="my-button" data-action="cancel">取消</button>

const buttons = document.querySelectorAll('.my-button');

buttons.forEach(button => {
  const action = button.getAttribute('data-action');
  button.addEventListener('click', event => {
    handleClick(action);
  });
});

function handleClick(action) {
  switch (action) {
    case 'submit':
      console.log('提交');
      break;
    case 'cancel':
      console.log('取消');
      break;
    default:
      console.log('未知操作');
  }
}

在上面的代码中，我们首先使用querySelectorAll方法获取了所有class为my-button的按钮，并使用forEach循环为每个按钮添加了一个点击事件。然后在点击事件的回调函数中获取了按钮的data-action属性的值，并调用了handleClick方法来处理不同的操作。

示例2 - 自定义属性带参传递

在实际开发中，我们可能需要在自定义属性中传递一些自己想要的参数，这时我们可以使用JSON字符串作为自定义属性的值，然后在JavaScript中使用JSON.parse方法将其解析成一个对象。

<button class="my-button" data-action='{"type": "submit", "id": 1}'>提交</button>
<button class="my-button" data-action='{"type": "cancel", "id": 2}'>取消</button>

const buttons = document.querySelectorAll('.my-button');

buttons.forEach(button => {
  const actionStr = button.getAttribute('data-action');
  const action = JSON.parse(actionStr);
  button.addEventListener('click', event => {
    handleClick(action);
  });
});

function handleClick(action) {
  console.log(action.type, action.id);
}

在上面的代码中，我们在data-action自定义属性中使用了一个JSON字符串，然后在JavaScript中使用JSON.parse方法将其解析成了一个JavaScript对象。在handleClick方法中，我们可以直接访问该对象的属性来获取传递的参数。

希望这份攻略对你有所帮助。