标签: custom-data-attribute

所以我使用的任何自定义数据属性都应以"data-"开头:

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

如果我忽略这一点,会发生什么不好的事吗？即:

<li class="user" name="John Resig" city="Boston"
     lang="js" food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

我想一个坏处是我的自定义属性可能与具有特殊含义的HTML属性冲突(例如name),但除此之外,仅仅编写"example_text"而不是"data-example_text"会有问题吗？(它不会验证,但是谁在乎呢？)

我正在尝试将HTML 5数据属性添加到DOM中.我在jQuery网站上看到过数据属性的格式是:

$('.pane-field-related-pages ul').data("role") === "listview";

但这似乎没有在DOM中添加任何东西？

如何将上述数据角色添加到相关的ul标签中？

我有一个带有一些背景图像的文件夹(one.jpg,two.jpg,three.jpg)和这个标记

<section class="slide" data-bg="one"></section>
<section class="slide" data-bg="two"></section>
<section class="slide" data-bg="three"></section>

是不是可能只用CSS来做这样的事情？

.slide{
    background-image: url(img/attr(data-bg).jpg);
}

当然,这段代码不起作用.

我正在尝试在我的按钮上设置一些数据,以便可以访问它onclick.我在按钮的数据属性中使用JSON没有问题,其中键值是一个字符串.但是,我无法弄清楚如何将值设置为函数.

单击此演示代码中的按钮,我想要发生的是click事件调用该函数option1(),该函数将提醒字符串"hello outside".

我得到的错误是这样的:

Uncaught TypeError: Property 'option1' of object #<Object> is not a function

HTML(JSFiddle在这里:http://jsfiddle.net/NDaEh/32/):

<button type='button' data-button='{"option1": "option1", "option2": 
"option2"}'>click1</button>

JS:

var data='hello outside';
var option1=function(data){
    alert(data)
}  

$('button').click(function(){
  //var data='hello inside';
  $(this).data('button').option1(data); // should alert 'hello outside'
});

思考？

我想知道html数据属性是否真的需要应用一个值？

我想知道这一点,因为我们通常想知道的是,该属性是否实际设置为一个标志.(确定我们可以为此使用一个类;但实际上除非你要以不同方式设置这些项的样式,否则标志比语义项更多的数据).

一个完美的例子是,如果我们想要一个链接滚动到它的目标而不是跳转我们的jQuery代码可能看起来像:

$(document).on('click', '[data-scroll-link'], function(){/**do scroll**/});

我知道在Google Chrome中,锚点就足够了

<a href="#bottom" data-scroll-link>Scroll to bottom</a>

但那会无处不在吗？它甚至是有效的HTML5(我相信这是由于自动对焦,自动播放等属性).或者我们需要:

<a href="#bottom" data-scroll-link="true">Scroll to bottom</a>

我想知道我是否可以将数据标签与CSS中的动画结合起来.我有一个由javascript模板引擎呈现的未定义数量的项目列表.一旦JS完成呈现它们,我想一个接一个地淡化它们而不必编写大量的CSS选择器.这是我最初的想法,当时我只有大约6个元素被动态添加.由于它可能会得到一个未定义的数量,但仍然应该看起来很好,我面临着所描述的问题.

这可能吗？我如何编写CSS？

li.shown {
    -webkit-animation: animateIn .8s forwards;
    -moz-animation: animateIn .8s forwards;
    animation: animateIn .8s forwards;
    -webkit-transition-delay: 0;
    -moz-transition-delay: 0;
    transition-delay: 0;
    -webkit-transition-delay: attr(data-animation-offset ms);
    -moz-transition-delay: attr(data-animation-offset ms);
    transition-delay: attr(data-animation-offset ms);
}

我的列表项可能如下所示,数据标签由js计算:

<li data-animation-offset="2000" class="shown"></li>

当然,最简单的解决方案是使用好的旧样式标签,但最酷的标签可能是css版本.

提前致谢

我刚开始考虑将HTML 5 api用于Rails/JQuery项目,因此我可以使用这个出色的data-属性来存储值.

我担心浏览器兼容性问题.我有两个问题(基本问题):

1. 为了使用HTML 5,人们是否需要升级他们的浏览器？这是如何运作的？

2. 是否有每个浏览器布局引擎支持哪些功能的最新图表,比维基百科有关比较HTML布局引擎的文章更新,这个什么时候可以使用... HTML 5页面？

例如,使用IE6的人会遇到问题吗？很多非计算机saavy的人我曾经和他们谈过想要上网的人,而他们说话的人仍在使用IE6!

如果这不是问题,并且您可以在旧浏览器上使用HTML 5,那么您如何？或者我应该看看哪些文档:)？谢谢.

更新:我将发布一些有趣的链接,因为我在下面找到它们.

FindMeByIP:"一个简单的应用程序,使用Modernizr以易于阅读的格式显示您的浏览器对CSS3和HTML5功能的支持." - CSS3和HTML5的浏览器支持

html <a></a>标签中的href和data-href属性有什么区别？我目前的代码如下:

<a id="sign_in_with_facebook" href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a>

当我改变它

<a id="sign_in_with_facebook" data-href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a>

它没有重定向到verify_phone_process_1.html页面.

所以我有一个带有按钮的 React 组件，它有一个使用 data-* 属性的点击处理程序。如果这是直接 React 那么我知道如何从 data-* 属性中获取值。但是我正在学习如何使用 TypeScript，所以我不知道如何访问这个属性。那么使用 TypeScript 访问 data-* 属性的最佳方法是什么？

这是我的按钮的 JSX 代码：

<button type="button" className="NavLink" data-appMode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this) }>Main</button>

这是我的点击事件处理程序：

handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
    // What code should go here to access the data-appMode attribute?
}

我必须在自定义数据标签或ID之间进行选择.我想选择自定义数据标记,但我想确保它们不会导致当今最广泛使用的浏览器出现浏览器兼容性问题.

我正在使用jQuery 1.6,我的特定场景涉及我需要为几个动作引用commentId的情况.

<div data-comment-id="comment-1" id="comment-1">
   <a class="foo"></a>
</div>

在jQueryin中提取数据标签更容易: $('foo').data('commentId');

从id中提取子字符串似乎有点复杂,并且可能由于某种原因而中断: <a id="comment-1"

这两种方法都有任何彻底的优点或致命缺陷吗？