标签: custom-data-attribute

完全尊重Html5数据属性

当我有这样的代码:

 <li class="user" data-name="Royi Namir" data-city="Boston" data-lang="js" data-food="Bacon"> </li>

我在文档中添加了很多冗余字符.

我只需要这种类型data-XXX:

myDomElement.dataset[xxx];

但是,我可以轻松地做到这一点

<li class="user" dn="Royi Namir" dc="Boston" dl="js" df="Bacon"> </li>

没有那些额外的data-前缀(并节省了很多额外的字符).并通过"开始时"选择器来读取它,如[d ^] - jQuery API

我在这里错过了什么吗？

我们有这种"奇怪"的情况,当在jquery点击功能中检索时,存储在数据属性(ex data-prodcode)中的某些产品代码(例如11E6)将转换为11000000.像这样的东西:

    <a data-prodcode="11E6">click</a>
    var code = $(this).data('prodcode');
    console.log(code); --> 11000000

关于如何避免这种行为或可能导致这种行为的任何建议？

我有一个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')

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

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

可能重复:
使用javascript/jQuery获取data-*属性列表

我有一系列看起来与此类似的对象:

<a data-type="file" data-path="/some/path" data-size="849858">Link</a>

我想创建一个动态拉动每个数据属性的函数,所以如果我添加类似"data-icon"或任何其他数量的属性,函数仍会返回所有数据属性的数组,如:

{
    "type" : "file",
    "path" : "/some/path",
    ...
}

我需要为Ember.View分配一个静态数据属性,如何在View对象中而不是在{{view }}标签中设置它.

App.MessagesFormView = Ember.View.extend({
  tagName: 'div',
  classNames: ['modal', 'fade'],
  didInsertElement: function() {
    this.$().modal('show')
  },
  willDestroyElement: function() {
    this.$().modal('hide')
  },
})

是否可以仅data-*使用CSS 匹配具有属性的所有节点？

以下是我想要匹配的属性示例:

data-scope
data-sessionlink
data-visibility-tracking

我可以

*[data-scope] *[data-sessionlink] *[data-visibility-tracking]

但我正在寻找更紧凑的东西.此外,我不知道data-*在我的应用程序中可能遇到的所有可能的属性.

我有一个自定义JS函数，可在加载时在页面中的所有元素中创建/注入自定义链接。

操作之前：

<div class="myimagediv">
       <img class="img-tag" src="#" data-src="alternative content I need" alt="">
    </div>

现在，此自定义函数可以操纵元素：

[].forEach.call(document.querySelectorAll('.myimagediv'), function(elem) {
            old_html = elem.innerHTML;

            new_html = '<a class="customlink" href="' + elem.querySelector('img').src + '">' + old_html + '</a>';
            elem.innerHTML = new_html;
        });

新操作的元素：

<div class="myimagediv">
      <a class="customlink" href="this should be the content of my data-src" title="">
          <img class="img-tag" src="#" data-src="alternative content I need" alt="">
      </a>    
    </div>

如何从IMG标签获取data-src属性并将其注入到新创建的自定义链接函数中？

我应该使用var吗？然后调用它，但是我无法掌握如何读取data-src并重新使用它。

任何帮助将不胜感激。

我正在尝试使用内联数据属性作为CSS的变量...是否有任何已知的选项可以运行此命令：

.mycss-class {text-shadow: attr(data-textshadow); }

<div class="mycss-class" data-textshadow="0 0 0 #000">lorem ipsum</div>

chrome dev-tool只会报告“无效的属性值”

非常感谢和问候