使用＃和是否安全。 html屬性中的字符？

Question

我想知道我是否可以將HTML對象的屬性值設置為包含#字符串？

我想這樣做的原因是頁面將有很多項目應該將頁面滾動到指定的元素，我想存儲數據'滾動到哪個項目？ '作為data-scrollto屬性。

所以我的JavaScript代碼 - 將會是這樣的：

function ScrollToElement(lm)
{
    var theTop  = lm.offset().top;
    $("html,body").animate({
        scrollTop: theTop/*,
        scrollLeft: 1000*/
    });
}

// .. and add click event to all such objects : 
$('.scroller').click(function(){
        var theSelector = $(this).attr('data-scrollto');
        ScrollToElement($(theSelector));
    });

所以html元素看起來像：

<a class='scroller' data-scrollto='p#p-to-scroll'>Click to scroll to p</a>

這樣安全嗎？

作為一個附帶問題，為什么呢

$(element).data('scrollto');

不起作用但是

$(element).attr('data-scrollto'); 

工作？

Answer 1

根據W3C規范，是的，它是安全的，使用U+0023 NUMBER SIGN字符（ # ）和U+002E FULL STOP字符（ . ）。

屬性名稱，后跟零個或多個空格字符，后跟單個U+003D EQUALS SIGN字符，后跟零個或多個空格字符，后跟屬性值，除了上面給出的屬性值要求之外， 不得包含任何文字空格字符，任何U+0022 QUOTATION MARK字符（ " ）， U+0027 APOSTROPHE字符（ ' ）， U+003D EQUALS SIGN字符（ = ）， U+003C LESS-THAN SIGN字符（ < ）， U+003E GREATER-THAN SIGN字符（ > ）或U+0060 GRAVE ACCENT字符（`），不能是空字符串 。

閱讀http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#attributes-0 。

Answer 2

是的，你可以存儲哈希#和. 在數據屬性中。 您應該使用正確的數據方法。 http://api.jquery.com/jQuery.data/

var theSelector = $(this).data('scrollto');

如果您似乎無法使用數據方法，請檢查您正在使用的jQuery版本，它是在1.2.3版本中引入的