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

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

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

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

阅读有关HTML5 data-属性的更多信息.