Custom Attributes

[shadowayex]

I've obtained mixed information about this subject. I'm wanting to write something in JavaScript that did some nifty stuff to attributes specified by the person using my JavaScript code. The issue I run into is that I don't particularly want to force people to devote things like an element's id or name to obtaining said effects.For example, let's say that the user could specify some sort of decoration via my JavaScript. I know that decoration implies styling which could possibly done with CSS classes and such, but let's pretend that this "decoration" could only be done with JavaScript. At my knowledge level, the user would have to set a certain id and I would have to grab elements with this id and apply my "decoration" to them. But I would rather have a custom attribute that I can look for and grab elements with.For example, let's say I have a "decoration" named "top-rated" and someone wanted this applied. With my current knowledge, something like this would have to be used:

<script type="text/javascript">element = document.getElementById("top-rated");applyDecoration(element); // Replace this with actual code</script><p id="top-rated">Top Rated Content</p>

A few issues with this, however. First, because of the nature of ids, developers could only have one element with that "decoration." Second, this would eliminate the availability of whichever attribute is used (in this case, the id), so developers would have to work around that as well. I'm looking for more of a solution like the following:

<script type="text/javascript">// This is not (that I know of) something that exists, so I would have to make something up myself, I'm sureelements = getElementsWhere("decoration == top-rated");for (i in elements){	applyDecoration("top-rated", elements[i]);}</script><p decoration="top-rated">Top Rated Content</p>

The above is purely just an example. I'm wanted to extend this capability and build many interesting things, defining custom attributes for different features I develop and allow other developers to apply my work simply by defining these attributes in their HTML. I know there is a lot to this project, and I'm sure there are many different implementations of such functionality, but I'm thinking that custom attributes may be the best approach to what I'm going for.My questions at this point would have to be the following:Are custom attributes valid? I read that HTML 5 has something close; it allows you to create custom data attributes of the form data-*. This seems to give me the functionality I desire, but I'm not sure that things of this sort were their intended use.If not valid, is there another approach I can take?In general, would using custom attributes (data- or otherwise) be the best solution?

[Ingolme]

You can use the class attribute, and search through elements that contain it using javascriptA simple example:

<element class="something something-else">var elements = getElementsByTagName("*");for(var n=0;n<elements;n++) {  if(/\bsomething\b/.test(elements[n].className)) {	// If "something" is one of the space-separated values of the class attribute	// Do something  }}

[shadowayex]

You can use the class attribute, and search through elements that contain it using java script:

<element class="something something-else">for(n=0;n<elements;n++) {  if(/\bsomething\b/.test(elements[n].className)) {	// If "something" is one of the space-separated values of the class attribute	// Do something  }}

That looks like a good solution. The implementation it's going to be interesting, but I like how it doesn't sacrifice the developer's ability to use certain attributes. I'll start an implementation of this.If anyone else has suggestions, I'm open to try them out as well.