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

Question

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

Answer 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 开发人员，你会爱上它们（或者可能不会）。

Answer 2

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

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

所以你可以有这个：

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

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

Answer 3

在这种情况下，它们是用于配置轮播组件的变量：

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

阅读有关 HTML5data-属性的更多信息。