标签: custom-data-attribute

有没有人知道如何data-*在不将标记呈现为无效的情况下在XHTML中实现HTML5数据属性()？

是否有自定义命名空间黑客可以在现有的HTML元素上使用它？

我在html中使用了一些自定义属性,用于jquery的东西.我看到data-XYZHTML5中有属性,但我需要xhtml 1.0严格.我还有其他选择吗？

我有当前的HTML:

<input id="dynamic1" /* other */ data-group-animal="y1,y2" />
<input id="dynamic2" /* other */ data-group-vegetable="y3,y4" />

这些是独立的div,可以在通过ajax发送数据时一起使用或不使用.

现在,我有一个选项是使用两个字段,我需要data-value根据一些表单选项检索两者.数据属性不同(用于不同的目的 - 我可以发送或不发送所有组或单独)

所以我想做:

$('input').data('group*') 但它不起作用,然后我意识到我需要一个正则表达式.

是否有可以使用的数据属性的正则表达式？

给出这个输入

.prettyRange {
  -webkit-appereance: none;
}

.prettyRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right, #fff 0%, green 50%, #fff 0%);
}

<input class="prettyRange" type="range" name="capability" data-percent="100%">

但如果我试图通过attr(数据百分比)设置%,它就不起作用.

background: -webkit-linear-gradient(right, #fff 0%, green attr(data-percent), #fff 0%)

如何使用项目的data-percent属性？

PS:我想使用data-property,因为我需要使用JS更新这个值,我们不能用JS选择伪元素.

我正在做一张桌子。

document.querySelector('table').addEventListener('click', (e) => {
  console.log(e.target);
  console.log(e.target.dataset.item);
})

td {
  padding: 8px;
  border: 1px solid black;
  background-color: blue;
}

span {
  background-color: red;
  padding: 4px;
}

<table>
  <tr>
    <td data-item="item1"><span>1</span></td>
    <td data-item="item2"><span>2</span></td>
    <td data-item="item3"><span>3</span></td>
    <td data-item="item4"><span>4</span></td>
    <td data-item="item5"><span>5</span></td>
  </tr>
</table>

当我点击蓝色部分时，我可以获得data-item属性。但是当我点击红色部分时，我不能。

我想修复它，如果我点击<span/>，<td/>我想从中获取data-item属性<td />。

我想这应该是一个非常简单的任务,但使用Firefox for Mac,3.6.12以下不起作用:

// assign data attributes
$('.gallery li').each(function(i) {
    $(this).data('slide',i+1);
});

// outputting an empty jQuery object
console.log($('.gallery li[data-slide]'));

// this does not work either outputting an empty jQuery object
console.log($("[data-slide]"));

使用Firebug我可以看到所有数据幻灯片属性(包括它们的数值)都正确附加到lis并注销:

$('.gallery li').each(function(index) {
  console.log($(this).data());
});

按预期输出:

Object { slide=1}
Object { slide=2}
Object { slide=3}
Object { slide=4}

那为什么第一个console.log不起作用呢？

我有一个div,在某些标签上添加了动态数据属性.(数据的名称 - 由脚本动态生成的属性,因此我的脚本无法知道数据属性的名称)

<div data-1223="some data" data-209329="some data" data-dog="some value"> </div>

现在,我想编写一个代码,通过删除所有数据属性及其值来重置div.

我可以用

$('div').attr('data-209329',"")

但问题是我不知道将要添加的数据属性的名称.将添加的数据属性是动态的,我无法控制它.

删除div并重新插入div不是一个选项.请帮忙.提前致谢

我需要从 html 表中获取 userid、data-attribute 的值，并将该值放入 var 中，但我想在没有单击操作的情况下执行此操作。

  <table id="tblList">
    <tbody id="someTest">
      <tr data-userid="801992084067">
      <tr data-userid="451207954179">
      <tr data-userid="310896831399">
      <tr data-userid="863939754980">
      <tr data-userid="1123542226482">
    </tbody>
  </table>

我尝试这样做，但 rowId 未定义。

 var rowId = $("#someTest tr").last().attr("[data-userid"]");

我需要从 event.relatedTarget 检索 data-url 属性的值

我尝试了很多方法：

e.relatedTarget.data('url')
e.relatedTarget.attr('url')
e.relatedTarget.prop('url')

但它总是返回一个错误..但值在那里：

我怎样才能找回它？谢谢！乔

今天，在一篇名为“ 更多选项来帮助网站在Google搜索上预览其内容的博客”中，Google宣布了Google搜索引擎的新行为。我感兴趣的部分是Googlebot现在将按如下方式解释HTML属性data-nosnippet：

要显示帮助限制的新方法，其页面的一部分都可以作为一个片断是“ data-nosnippet上” HTML属性span，div和section元素。这样，您可以防止HTML页面的该部分显示在[Google搜索引擎结果页面]的文本片段内。

例如：

<p><span data-nosnippet>Harry Houdini</span> is undoubtedly the most famous magician ever to live.</p>

Run Code Online (Sandbox Code Playgroud)

我很惊讶他们选择使用以prefix开头的属性data-。这是WHATWG的HTML生活标准对data-属性的描述（强调我的意思）：

自定义数据属性是没有名称空间的属性，其名称以字符串“ data-” [...] 开头

自定义数据属性旨在存储页面或应用程序专用的自定义数据，状态，注释和类似内容，对于这些自定义数据，状态，注释和类似内容，没有更多合适的属性或元素。

作为Web开发人员，我一直认为data-前缀的目的是为Web开发人员提供一个仅用于其CSS和脚本进行操作的名称空间。没有data-prefex的自定义HTML属性不是面向未来的，它可能在未来的浏览器或未来的搜索引擎机器人中突然具有意义。

Googlebot似乎违反了这一约定，现在选择查找和解释data-nosnippetHTML属性。作为网络开发人员，我们再也无法确定data-属性是“页面或应用程序专用的”，也许Google将来会再次为另一个data-属性执行此操作！

• 我的解释正确吗？
• Googlebot是第一个以data-这种方式解释data-属性的人吗？或者这艘船已经航行了，浏览器和bot是否已经在解释属性？