Strange behavior related with property accessors in javascript/jquery

Question

I have a issue with Chrome and Safari:

Code example:

// Get all links with the same data-test attribute
links = $('[data-test]');

//The issue is here:
// This only works in Chrome, not in safari.
var test = links[0].testProperty;

// This works in Chrome and Safari.
var test2 = $(links[0]).attr('testProperty');

console.log(test)
console.log(test2)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" testProperty="valueTest1" data-test>Test1</a>
<a href="#" testProperty="valueTest2" data-test>Test2</a>
<a href="#" testProperty="valueTest3" data-test>Test3</a>

Why Safari does not allow links[0].testProperty ?

http://stackoverflow.com/questions/15010981/javascript-getting-custom-attribute-works-only-with-element-getattributeattrib — DaniP, Apr 18 '17 at 18:50

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

Here your answer https://stackoverflow.com/a/15011028/7041168

By standard, you need to use the date- before any custom attributes.

And to change the problems, it's best to use Element.getAttribute("") property.

edited May 23 '17 at 10:31

Community

1
1

answered Apr 18 '17 at 18:45

Vlad Yaremenko

81
5

score 0 · Answer 2 · answered Apr 18 '17 at 18:32

0

links[0] is a DOM Element Object, which doesn't have the property testPropety.

Neither chrome nor safari would define that property.

answered Apr 18 '17 at 18:32

Z.Z.

674
6
16

Strange behavior related with property accessors in javascript/jquery

2 Answers2