什么是 data-target 和 data-slide-to 属性？

Posted 2023-02-22

【中文标题】什么是 data-target 和 data-slide-to 属性？

【英文标题】：What is data-target and data-slide-to attribute?

【发布时间】：2013-11-19 17:35:06

【问题描述】：

我正在使用引导程序，（好吧，我是新手），我找到了这两个属性，有人可以解释一下吗？

【问题讨论】：

data-* attribute docs。它们是遵循 html5 规范的自定义属性。

See their documentation.

what is data-icon in html5?的可能重复

应该提到 w3schools 在 *** 上被广泛鄙视，主要是因为他们没有纠正他们确实存在的错误。他们的网站在 Google 上很受欢迎，并且易于阅读和学习，但不如官方文档好。使用 MDN 作为 Web 技术更具技术性但也更可靠的参考。

【参考方案1】：

只是为了继承@Larsenal 的观点，自定义数据属性对开发人员来说可能非常方便。正如规范所说：

自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合​​适的属性或元素。这些属性不适用于独立于使用这些属性的站点的软件。

示例用法包括：

存储初始高度/宽度，以后可能会用 JS 更改。 有一些简单的方法可以通过 javascript 获取和设置这些属性 - 使用 getAttribute 和 setAttribute。

 <div id='strawberry-plant' data-fruit='12'></div>
 <script>
    // 'Getting' data-attributes using getAttribute
    var plant = document.getElementById('strawberry-plant');
    var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
 </script>

记住，这是不是good practice。所以，请使用dataset properties。

在此处阅读有关数据属性的更多信息：http://html5doctor.com/html5-custom-data-attributes/

作为 JavaScript 开发人员，您会爱上它们（或者可能不会）。

【讨论】：

没问题，@XinruiMa！感谢您接受答案。这是我第一次在这里回答问题并很高兴它有所帮助。 :)

【参考方案2】：

您看到的属性是自定义数据属性。它们有时被表示为data-*。

任何带有“data-”前缀的东西都用于存储不会在浏览器中呈现的自定义数据。

所以你可以有这个：

<div data-foo="ABC" data-bar="123">Hello World</div>

通常，您会从 JavaScript 中读回这些数据并对其进行处理。

【讨论】：

非常感谢~！你们都帮了大忙！

【参考方案3】：

在这种情况下，它们是用于配置到carousel component 的变量：

使用数据属性轻松控制轮播的位置。 data-slide 接受关键字prev 或next，这会改变幻灯片 相对于当前位置的位置。或者，使用 data-slide-to 将原始幻灯片索引传递给轮播 data-slide-to="2"，将幻灯片位置移动到特定位置 以0开头的索引。

Read more about HTML5 data- attributes.