javascript - Setting attribute value of an element in camelCase using a directive - Stack Overflow

admin管理员组

文章数量:1315244

I'm trying to add an attribute to an angularJs element from a directive like this:

element.attr('startOffset', val);

But when I check the element, the attribute added is 'startoffset' where the 'o' is not a capital letter.

Is there any way to add an attribute to an element and keep the case of the word intact?

Thanks

I'm trying to add an attribute to an angularJs element from a directive like this:

element.attr('startOffset', val);

But when I check the element, the attribute added is 'startoffset' where the 'o' is not a capital letter.

Is there any way to add an attribute to an element and keep the case of the word intact?

Thanks

• javascript
• html
• angularjs
• angularjs-directive

Share Improve this question Follow edited Oct 20, 2014 at 2:26 PSL 124k2121 gold badges256256 silver badges243243 bronze badges asked Oct 20, 2014 at 1:45 ChanthuChanthu 1,79411 gold badge1515 silver badges2323 bronze badges 5

• You don't. You only set it separated by dash, and get the attribute with camel case, while using attrs. So just do element.attr('start-offset', val); – PSL Commented Oct 20, 2014 at 1:49
• Tried that. In that case, it just sets the attribute as 'start-offset' – Chanthu Commented Oct 20, 2014 at 1:54
• Yes that is what i said.. Attribute names are case insensitive, so even if you set it as startOffset it will be startoffset, and you can get it regardless of its case. Just try setting it without jqlite wrapper, element[0].setAttribute('startOffset', val); as see what happens. Why do you need it in camelcase anyways, what difference does it make? – PSL Commented Oct 20, 2014 at 1:55
• Thanks. That seems to have done the trick. I want it to be in camelcase because I'm trying to set the startOffset of an svg text element and for some reason, svg needs it to be in camelcase. – Chanthu Commented Oct 20, 2014 at 2:03
• 1 How did that do the trick? "startOffset" will still be "startoffset". – Winnemucca Commented Nov 21, 2017 at 6:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

If you set an attribute using jqliteWrapper .attr or even with direct DOM operation .setAttribute it will lowercase the attribute name, before attaching to the element.

When called on an HTML element in an HTML document, setAttribute lower-cases its attribute name argument.

Since you are using SVG try direct operation with setAttribute, however setting attributes preserve their cases with SVG, not sure if jquery does any transformations internally.

 element[0].setAttribute('startOffset', val);

Plnkr

---

Confirmed that it is jquery inclusion before angular which causes it not to preserve the attribute name casing while setting it via .attr, but if you do not include jquery and angular falls back to jqLite it will set the attribute name as is, so that will work (along with attrs.$set) with SVG as well apart from the direct DOM operation.

I have created namespace in the main div:

<div class="main-wrapper" xmlns="appnamespace">...</div>

Then I inserted attribute of html-element (element) in TS code (in JS it is possible too, of course) by setAttributeNS:

element.setAttributeNS(
            'appnamespace', 'myAttribute', info.value
)

The attribute was appeared in html-template

setAttributeNS adds a new attribute or changes the value of an attribute with the given namespace and name

element.setAttributeNS(namespace,name,value)

namespace is a string specifying the namespace of the attribute. name is a string identifying the attribute by its qualified name; that is, a namespace prefix followed by a colon followed by a local name. value is the desired string value of the new attribute.

This worked for me ->

var att = document.createAttribute("newName"); // Create a "newName" attribute
att.value = newName; // Set the value of the newName attribute
parent_tag.setAttributeNode(att);

本文标签： javascriptSetting attribute value of an element in camelCase using a directiveStack Overflow