Accessing attributes and properties in jquery/javascript

Question

I have a existing application which uses javascript and properties like notNull, isDate etc defined within the elements in html elements like input, select, etc

For example:

<input type = 'text' notNull class='mandatoryField' name = 'abc' id='abc' isDate/>

And the javascript checks for the properties with a hasProp method, placing the code below and corresponding warning messages are displayed:

function hasProp(thisField, thisProp) {
for ( var prop in thisField) {
    if (prop == thisProp)
        return true;
}
return false;
}

My issue here is with using different browsers - IE, Chrome and Firefox

This particular methods are all ok for Internet Explorer. when it comes to chrome and firefox, the notNull, isDate are treated as attributes rather than properties and the above hasProp method always returns false.

I did go through many questions available here, but couldn't find any way to access both properties and attributes in a single way - I would prefer jQuery to be used, since we will be migrating to jQuery eventually.

Any pointers to this will be really helpful.

Thanks, Reema

possible duplicate of [jQuery hasAttr checking to see if there is an attribute on an element](http://stackoverflow.com/questions/1318076/jquery-hasattr-checking-to-see-if-there-is-an-attribute-on-an-element) — Bhushan Kawadkar, Jul 29 '14 at 12:36
How can this be a duplicate? I want a way to access property as well as method in a single for loop or statement. — Reema, Jul 29 '14 at 15:48

score 0 · Answer 1 · answered Jul 29 '14 at 12:34

0

As you want a jQuery solution, you can use both jQuery.attr() and jQuery.prop() methods to solve your problem.

answered Jul 29 '14 at 12:34

Kevin Labécot

2,005
13
25

There is no `.hasProp()` :) – UweB Jul 29 '14 at 12:35

score 0 · Answer 2 · answered Jul 29 '14 at 12:51

0

I would prefer an pure Javascript approach:

var attributes = ['notNull', 'isDate'],
    checkForAttribute = function(elem){
      for(var i = 0, c = attributes.length ; i < c ; i++){
        if(elem.getAttribute(attributes[i]) !== null){
          console.log("attribute " + attributes[i] + " found");
        }else{
          console.log("attribute " + attributes[i] + " not found");
        }
      }
    }

See an working example here.

Here is some more information on the getAttribute() method.

answered Jul 29 '14 at 12:51

miron

1,361
1
11
24

This would check only for the attributes and not properties. I need to check if i have notNull as either a property or an attribute. – Reema Jul 29 '14 at 14:43
You can expand the function. If the element has the attribute notNull and the attribute has also an values than you could return it. – miron Jul 29 '14 at 17:17

score 0 · Accepted Answer · answered Jul 29 '14 at 12:53

I think the way you use the attribute and property aren't 100% accurate, properties (.prop()) in the jQuery context are basically the value of the attribute in memory, where as .attr() reflects the value in the markup. This is only the case for HTML attributes that are "built-in". So in your example, you're dealing with attributes all the way, just some don't happen to have any value.

The best way of detecting the presence of an attribute, cross browser using jQuery:

$('#myElement').is('[attrName]') === true

So, in your case:

$('#abc').is('[isDate]') === true

See this JS-Fiddle

Accessing attributes and properties in jquery/javascript

3 Answers3