1

I have a custom attribute i added to my html doc, and accordingly defined it at the top of the page.

The thing that confuses me is that even though i assign it to an object, when the object is created, it is entirely in lower case. I am not sure why. Example below:

var inputControlType = ""
var n = $("<div class = 'draggable' style='position:absolute;'>");
n.attr("id", "layer" + $('div#divControls').children().length + "new");
n.hide();
inputControlType = "checkbox";
var inputControls = $("<input type = '" + inputControlType + "' />");
inputControls.attr("id", "el" + $('#divControls').children().length + "new");
inputControls.attr("disabled", "true");
inputControls.css("font-family", "Microsoft Sans Serif");
inputControls.css("font-size", "12pt");
n.attr("elType", "3");
n.html("<span>" + inputControls.clone().wrap('<p>').parent().html() + "<label for='" + $('div#divControls').children().length + "new' style='font-size: 12pt; font-family: Microsoft Sans Serif;'>Default Text</label></span>").appendTo($("#divControls"));

in the code above you see --n.attr("elType","3");-- but when i inspect it in the markup, it is eltype="3". This is not good as then elType is undefined.

markup:

<div style="left: 665px; top: 183px; display: block; position: absolute; cursor: move; background-color: pink;" id="layer37new" class="draggable ui-draggable" context="menuOne" menuid="el37new" eltype="3">
  <span>
    <input style="font-family: Microsoft Sans Serif; font-size: 12pt; cursor: move;" id="el37new" disabled="disabled" value="on" type="checkbox" context="menuOne" menuid="el37new">
    <label style="font-family: Microsoft Sans Serif; font-size: 12pt;" for="37new">
      Default Text
    </label>
  </span>
</div>

Did i do something wrong such that is prints eltype instead of elType? ALSO: no, changing my reference of the attribute from elType to eltype is not a valid answer. I just dont understand why it would not act the way it was written.

Fallenreaper
  • 10,222
  • 12
  • 66
  • 129
  • 1
    You should be using `.prop()` for things that are really *properties* of the DOM elements, like "id" and "disabled". Also set "disabled" to simply `true`, not the string "true". – Pointy Sep 04 '12 at 20:20
  • Also attribute names are defined to be case-insensitive, so it doesn't matter really. – Pointy Sep 04 '12 at 20:24
  • whats the difference between prop() and attr()? and will do with the true. For some reason, when i was trying to reference it as shown here, it seemed to be case sensitive, which is what confused me.... as when i do .attr("eltype") seems to return something else instead of "elType" – Fallenreaper Sep 04 '12 at 20:28
  • Ah - well hmm ... hold on let me check something. Oh, and `.prop()` is for those things that are really properties - if you have a DOM element for example, you can just say `elem.id = "whatever";` so for those ("id", "name", "src", "href", "disabled", "value", etc) you use `.prop()`. I think it's more confusing than it should be. – Pointy Sep 04 '12 at 20:34
  • to me, even though i read the jquery definition, i still seem to see id as an attribute. I guess to me, i see like all properities are attributes but not all attributes are properties. Do i have it backwards or something? – Fallenreaper Sep 04 '12 at 20:34
  • Well it's mainly old versions of IE that get confused. If you try to use the DOM `getAttribute()` in those browser to fetch (for example) "className", it doesn't work. As to your original question, I think it's just the browser normalizing everything to lower case because it just wants to. I can't find any spec that says whether it's supposed to remember original capitalization, but the spec does say that case doesn't matter on attribute lookups. – Pointy Sep 04 '12 at 20:39
  • @Fallenreaper Here is a good explaination about `prop` and `attr` http://stackoverflow.com/a/6043030/597419 – Danny Sep 04 '12 at 20:39
  • 1
    Why not just do `n.attr("eltype", "3");` according to the [XHTML specification](http://www.w3.org/TR/xhtml1/#h-4.2), "XHTML documents must use lower case for all HTML element and attribute names." I am guessing the browser is converting the elements and attributes to lower case for you. – Danny Sep 04 '12 at 20:49
  • wow. I did not know that. Thanks for the information! I am used to the styling of one of my first languages, Java, where you string all the words together, but capital letters or each word after the first. Ex: commandFunction or elType..... lol, I will have to get used to the different styling syntax. Thanks Danny – Fallenreaper Sep 05 '12 at 15:08
  • It appears that it natively gets normalized when you set it...even using vanilla javascript '.setAttribute('elType', '3')' it will still remove capital letters. – afreeland Nov 15 '12 at 14:14

0 Answers0