Question

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

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

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

的变量

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

Read more about HTML5 data- attributes

什么是数据目标和数据幻灯片属性？

3 个答案: