{"id":1905,"date":"2017-03-23T18:49:40","date_gmt":"2017-03-23T13:19:40","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1905"},"modified":"2017-03-28T17:46:52","modified_gmt":"2017-03-28T12:16:52","slug":"prop-vs-attr","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/prop-vs-attr\/","title":{"rendered":"JAVASCRIPT – .prop() vs .attr()"},"content":{"rendered":"

.attr()<\/b><\/span><\/h4>\n

Get the value of an attribute for the first element in the set of matched elements.<\/p>\n

.prop()<\/b><\/span><\/h4>\n

Get the value of a property for the first element in the set of matched elements.<\/p>\n

What is Attributes?<\/b><\/span><\/h4>\n
    \n
  • Attributes carry additional information about an HTML element and come in name=\u201dvalue\u201d <\/b>pairs. we can set an attribute for HTML element.<\/li>\n<\/ul>\n

    Example :<\/span><\/h4>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%3Cinput%20id%3D%E2%80%9Cwiki%22%20type%3D%E2%80%9Cwiki%22%20value%3D%E2%80%9Cwiki%22%3E%0A%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n
      \n
    • here, \u201ctype\u201d,\u201dvalue\u201d, \u201cid\u201d are attributes of the input elements.<\/li>\n<\/ul>\n

      What is Property? <\/b><\/span><\/h4>\n
        \n
      • Property is a representation of an attribute in the HTML DOM.<\/span><\/li>\n
      • once the browser parse our HTML code ,corresponding DOM node will be created which is an object thus having properties.<\/span><\/li>\n
      • since, attr() gives the value of element as it was defines in the html on page load.<\/span><\/li>\n
      • It is always recommended to use prop() to get values of elements which is modified through javascript\/jquery , as it gives the original value of an element\u2019s current state.<\/span><\/li>\n<\/ul>\n

        .attr vs .prop:<\/b><\/span><\/h4>\n

        style<\/b><\/span><\/h4>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%3Cinput%20style%3D%22font%3Aarial%3B%22%2F%3E%0A.attr(\u2018style\u2019)%20%E2%80%93%20It%20returns%20inline%20styles%20for%20the%20matched%20element%20i.e.%20%22font%3Aarial%3B%22%0A.prop(\u2018style\u2019)%20%E2%80%93%20It%20returns%20an%20style%20declaration%20object%20i.e.%20CSSStyleDeclaration%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

        value<\/b><\/span><\/h4>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%3Cinput%20value%3D%22wikitechy%22%20type%3D%22text%22%2F%3E%20%20%20%0A%24(\u2018input\u2019).prop(\u2018value\u2019%2C%20\u2019i%20changed%20the%20value\u2019)%3B%0A%0A.attr(\u2018value\u2019)%20\u2013%20returns%20\u2019wikitechy\u2019%20*%0A.prop(\u2018value\u2019)%20\u2013%20returns%20\u2019i%20changed%20the%20value\u2019%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n

        Note: <\/b><\/span><\/h4>\n

        jQuery for this reason has a .val() method, which internally is equivalent to .prop(\u2018value\u2019)<\/p>\n

        What is the difference between .prop() and .attr():<\/b><\/span><\/h4>\n\n\n\n\n\n\n
        .prop() <\/b><\/td>\n.attr()<\/b><\/td>\n<\/tr>\n
        A\u00a0property\u00a0is the current state of the input element<\/td>\nAn\u00a0attribute<\/i>\u00a0is the default value.<\/td>\n<\/tr>\n
        \u00a0jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() only retrieves attributes.<\/td>\njQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior.<\/td>\n<\/tr>\n
        properties<\/b>\u00a0are in HTML\u00a0DOM tree<\/i>\u00a0(== basically an actual property of some object in JS).<\/td>\nattributes<\/b>\u00a0are in\u00a0 HTML\u00a0text document\/file<\/i>\u00a0(== imagine this is the result of our html markup parsed),<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        \u00a0<\/p>\n\n\n\n\n\n\n\n
        .prop() <\/b><\/td>\n.attr()<\/b><\/td>\n<\/tr>\n
        .prop()\u00a0changes properties for that HTML tag as per the DOM tree.<\/td>\n.attr()\u00a0changes attributes for that HTML tag.<\/td>\n<\/tr>\n
        .prop()\u00a0can return any type \u2013 string, integer, Boolean.<\/td>\n.attr()\u00a0always returns a string<\/td>\n<\/tr>\n
        When we are checking Image src<\/b> property. If the src is empty, prop return the current url of the page.<\/td>\nWhen we are checking Image src<\/b> property. If the src is empty, attr return empty string.<\/td>\n<\/tr>\n
        \u00a0.prop() was added later to be more semantic and it works better with value-less attributes like \u2018checked\u2019 and \u2018selected\u2019.<\/td>\n.attr() is used to get attributes from the HTML tags, and while it is perfectly functional.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        \u00a0<\/p>\n\n\n\n\n\n\n
        .prop() <\/b><\/td>\n.attr()<\/b><\/td>\n<\/tr>\n
        Get the value of a\u00a0property<\/b>\u00a0for the first element in the set of matched elements.<\/p>\n

        To gives the updated values of elements which is modified via javascript \/ jquery<\/td>\n

        		Get the value of an\u00a0attribute<\/b>\u00a0for the first element in the set of matched elements.<\/p>\n

        To gives the value of element as it was defines in the html on page load<\/td>\n<\/tr>\n

        Getting a custom HTML attribute (since it\u2019s not synced with a DOM property).<\/td>\nGetting a HTML attribute that doesn\u2019t sync with a DOM property, e.g. get the \u201coriginal value\u201d of a standard HTML attribute, like\u00a0.<\/td>\n<\/tr>\n
        \u00a0Purpose: <\/b>Gives access to properties that belong to element nodes. These properties are similar to attributes, but are only accessible through JavaScript.<\/td>\nPurpose:<\/b>\u00a0Allows markup to have data associated with it for events, rendering, and other purposes.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n[ad type=\u201dbanner\u201d]\n
          \n
        • Generally, we need prop() rather than attr().<\/li>\n
        • Replacing calls to attr() with prop() in our code will generally work.<\/li>\n
        • Properties are generally simpler to deal with than attributes.<\/li>\n
        • An attribute value may only be a string whereas a property can be of any type.<\/li>\n
        • For example, the checked property is a Boolean, the style property is an object with individual properties for each style, the size property is a number.<\/li>\n
        • Both a property and an attribute with the same name exists, usually updating one will update the other, but this is not the case for certain attributes of inputs, such as value and checked: for these attributes, the property always represents the current state while the attribute (except in old versions of IE) corresponds to the default value of the input (reflected in the default Value \/ default Checked property).<\/li>\n
        • As an example of how properties are simpler to deal with than attributes, consider a checkbox that is initially checked. Here are two possible valid HTML :<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%3Cinput%20id%3D%22cb%22%20type%3D%22checkbox%22%20checked%3E%0A%3Cinput%20id%3D%22cb%22%20type%3D%22checkbox%22%20checked%3D%22checked%22%3E%0A%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

          So, how to find out if the checkbox is checked with jQuery:<\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201dif%20(%20%24(%22%23cb%22).attr(%22checked%22)%20%3D%3D%3D%20true%20)%20%7B\u2026%7D%0Aif%20(%20%24(%22%23cb%22).attr(%22checked%22)%20%3D%3D%20%22checked%22%20)%20%7B\u2026%7D%0Aif%20(%20%24(%22%23cb%22).is(%22%3Achecked%22)%20)%20%7B\u2026%7D%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

            \n
          • This is actually the simplest thing in the world to do with the checked Boolean property.<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201dif%20(document.getElementById(%22cb%22).checked)%20%7B\u2026%7D%0A%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n
              \n
            • The property also makes checking or unchecking the checkbox trivial:<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201ddocument.getElementById(%22cb%22).checked%20%3D%20false%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n
                \n
              • In jQuery 1.6,<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(%22%23cb%22).prop(%22checked%22%2C%20false)%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n

                The idea of using the checked attribute for scripting a checkbox is unnecessary.<\/p>\n

                  \n
                1. It\u2019s not obvious what the correct way to check or uncheck the checkbox is using the checked attribute<\/li>\n
                2. The attribute value reflects the default rather than the current visible state (except in some older versions of IE, thus making things still harder). The attribute defines whether the checkbox on the page is checked.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

                  .attr() Get the value of an attribute for the first element in the set of matched elements. .prop() Get the value of a property for the first element in the set of matched elements. What is Attributes? Attributes carry additional information about an HTML element and come in name=\u201dvalue\u201d pairs. we can set an attribute […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[275,1208],"tags":[4108,4105,4109,4110,4111,4104,4116,4103,4113,4106,4121,4114,4117,4115,4112,4118,4119,4120,4107],"class_list":["post-1905","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","tag-attr","tag-prop","tag-and-val","tag-difference-between-prop-and-attr","tag-difference-between-prop-and-attr-in-jquery","tag-difference-between-prop-and-attr-in-jquery-and-when-to-use-attribute","tag-html-property-vs-attribute","tag-javascript-prop-vs-attr","tag-jquery-attr-vs-prop","tag-jquery-attr-vs-prop-difference","tag-jquery-check-if-checkbox-is-checked","tag-jquery-prop-disabled","tag-jquery-prop-selected","tag-jquery-prop-vs-attr","tag-jquery-prop-method","tag-jquery-remove-property","tag-jquery-set-checkbox-checked","tag-jquery-uncheck-checkbox","tag-what-are-the-differences-between-prop"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1905"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1905\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}