I am just getting into jQuery so please forgive this maby stupid question, but I encountert the following:
$('#pb_inner').css('width',data + '%');
this code works fine. However I wonder why I can't do the following?
$('#pb_inner').style.width=data + '%';
Because $('#pb_inner') returns an array like jQuery object. A collection, not a single object (and even then, it would be another jQuery object):
From the docs:
(...),
jQuery()— which can also be written as$()— searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements.
You would have to use get:
$('#pb_inner').get(0).style.width=data + '%';
The
.get()method grants us access to the DOM nodes underlying each jQuery object
Because $('#pb_inner') returns a jQuery object not the raw DOMElement. You could use the properties if you retrieve the actual DOMElement from that jQuery object, for example:
$('#pb_inner').get(0).style.width=data + '%';
the selector $('#pb_inner') returns an array of jQuery wrapped objects matching the given parameter string.
the following will work
$('#pb_inner').get(0).style.width=data + '%'
get(0) will return the first object from the jQuery array, as a native DOM element.
And btw there is an advantage with using jQuery .css() method since you can write multiple CSS rules in it by passing an object, like in example:
$('#pb_inner').css({
'width': data + '%',
'height': data + '%',
'color': '#eaeaea'
})
