代码之家 › 专栏 › 技术社区 › spoulson

我可以像数据库记录一样将自定义属性存储在HTML DOM中吗?

browser jquery-ui dom html jquery

spoulson · 技术社区 · 17 年前

使用jquery为浏览器ff3和ie6/7开发时,在HTML标记上设置自定义属性时是否存在兼容性问题?

首先,我知道jquery的 data() 函数,它本质上做了我想要的,但数据在 clone() 功能。当使用jquery ui可拖动/可拖放插件时,这是一个问题,因为它在拖放过程中克隆了dom元素。为了这个问题的目的,我需要一个替代 数据() .

我想在拖放操作之间保留数据。我希望能够将数据注入在拖放操作期间移动的DOM元素中。为此,我可以构建HTML子元素来模拟数据库记录。快速实验表明,使用我想要存储数据字段的任何属性名,Firefox都没有问题。但是,HTML4规范指出某些标记只能包含某些属性名。用非标准属性填充DOM会导致与我提到的浏览器不兼容吗?

5 回复 | 直到 17 年前

Community Mohan Dere 9 年前

看看我刚才问过的这个类似问题: Can I just make up attributes on my HTML tags?

就个人而言,我不太喜欢将所有数据放入类属性的建议答案。感觉,只是…你知道吗?根据我的经验,虽然你的页面如果你编属性是无效的,但我还是这么做了。在4个主要浏览器中测试它,如果它可以工作,谁在乎呢?

我能想到的最好的解决方案是一个无效的现在 ,但将在HTML5,所以这很好。正如ms2ger在另一个问题中建议的那样,在自定义属性前面加上前缀 data-

http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#embedding-custom-non-visible-data

tvanfosson 17 年前

在HTML4中,如果没有某种标准的方法来实现这一点,我将尝试创建一个与可拖动元素相对应的隐藏元素,并将相关数据存储在该元素中。将隐藏元素命名为相对于可拖动的元素,这样您就可以轻松地查找该元素的信息。下面的扩展使用一个隐藏的跨度来实现这一点。注意:在测试它时,我不能用可拖动项复制您的问题——data()对我来说似乎很好,但我没有用各种插件来测试它,只是ui.draggable。

用途:

$('#draggableDiv').externalData('key','data');
var d = $('#draggableDiv').externalData('key');

jQuery.fn.externalData = function(key, data) {
    var value = this;
    this.each( function() {
        var id = this.id+'_external_data';
        var elem = jQuery('#'+id+':first');
        if (elem.size() == 0) {
            elem = $('<span style="display: none;" id="' + id + '"></span>"' );
            elem.appendTo(document.body);
        }
        if (data) {
            elem.data(key,data);
        }
        else {
            value = elem.data(key);
            return false;
        }
    });
    return value;
};