JS:“data-background-color”和.data(“background-color”）之间的关系

JS: relation between "data-background-color" and .data("background-color")

本文关键字：之间 关系 background-color data data-background-color JS      更新时间：2023-09-26

我目前正在阅读 在 Rails 中使用 Javascript 指南。这条线之间的关系

backgroundColor = $(this).data("background-color")

那个让我感到困惑：

<a href="#" data-background-color="#990000">Paint it red</a>

据我了解，它设置了"这个"的 bg 颜色。函数从哪里获取数据的值（"背景色"）？

我的猜测是"背景颜色"之前的"data-"允许函数访问HTML中的值？

我很感激你解释这种关系并指出我的更多信息。

以下是完整的 JS/coffeescipt 代码：

paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
    element.style.color = textColor
$ ->
  $("a[data-background-color]").click (e) ->
  e.preventDefault()
  backgroundColor = $(this).data("background-color")
  textColor = $(this).data("text-color")
  paintIt(this, backgroundColor, textColor)

完整的 HTML：

<a href="#" data-background-color="#990000">Paint it red</a>
<a href="#" data-background-color="#009900" data-text-color="#FFFFFF">Paint it green</a>
<a href="#" data-background-color="#000099" data-text-color="#FFFFFF">Paint it blue</a>
在我看来

，你基本上是对的。用例中的 jQuery .data（key） 方法允许检索它所应用的 dom 元素的相应 data- 属性。

例如，$(this).data('background-color') 将检索 dom 元素引用的 data-background-color 属性 this 。

因此，第二种方法执行以下操作：每当单击具有data-background-color属性的锚点 （a） 元素时，其背景和字体颜色将分别设置为其data-background-color和data-text-color属性的值。

您在

文档中使用的 HTML5 自定义数据属性，但仍具有有效的标记。浏览器将数据理解为自定义属性。
而自定义数据属性临时存储该值。你称它为它，这引用了对象 a 当你 单击一个它将相应地设置颜色。

相关文章：