Html 什么是 data-target 和 data-slide-to 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19846686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is data-target and data-slide-to attribute?
提问by Xinrui Ma
I am using bootstrap, (Ok, I am new to it), I found this two attributes, can somebody explain it to me?
我正在使用引导程序，（好吧，我是新手），我发现了这两个属性，有人可以向我解释一下吗？
采纳答案by Watchful Protector
Just to carry forward the point of @Larsenal, custom data attributes could be very handy for developers. Like the spec says:
只是为了发扬@Larsenal 的观点，自定义数据属性对开发人员来说可能非常方便。就像规范说的那样：
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is independent of the site that uses the attributes.
自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合适的属性或元素。这些属性不适用于独立于使用这些属性的站点的软件。
Example usage includes:
示例用法包括：
Storing initial height/width, which might later be changed with JS.
There are easy ways to get and set these attributes through JavaScript - using getAttributeand setAttribute.
存储初始高度/宽度，稍后可能会用 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>
Remember though, this is notgood practice. So, make use of dataset properties.
但请记住，这不是good practice。所以，利用dataset properties.
Read more about data-attributes here: http://html5doctor.com/html5-custom-data-attributes/
在此处阅读有关数据属性的更多信息：http: //html5doctor.com/html5-custom-data-attributes/
You would fall in love with them as a JavaScript developer (or maybe not).
作为 JavaScript 开发人员，您会爱上它们（或者可能不会）。
回答by Larsenal
The attributes you see are custom data attributes. They're sometimes denoted data-*.
您看到的属性是自定义数据属性。它们有时被表示为data-*。
Anything with the "data-" prefix is used to store custom data that won't be rendered in the browser.
带有“data-”前缀的任何内容都用于存储不会在浏览器中呈现的自定义数据。
So you could have this:
所以你可以有这个：
<div data-foo="ABC" data-bar="123">Hello World</div>
Typically, you'd read back this data from your JavaScript and do something with it.
通常，您会从 JavaScript 读回这些数据并对其进行处理。
回答by Blazemonger
In this case, they're variables used to configure to the carousel component:
在这种情况下，它们是用于配置轮播组件的变量：
Use data attributes to easily control the position of the carousel.
data-slideaccepts the keywordsprevornext, which alters the slide position relative to its current position. Alternatively, usedata-slide-toto pass a raw slide index to the carouseldata-slide-to="2", which shifts the slide position to a particular index beginning with0.
使用数据属性轻松控制轮播的位置。
data-slide接受关键字prevornext，这会改变相对于其当前位置的幻灯片位置。或者，用于data-slide-to将原始幻灯片索引传递给 carouseldata-slide-to="2"，它将幻灯片位置移动到以 开头的特定索引0。
