CODEWITHSUNDEEP
jquery
user1475207
user1475207

Reputation: 167

Does .css() alter properties in the HTML or an external stylesheet?

Newbie jquery: does the .css() function alter css properties of an element if the properties are included within the HTML or does it locate and subsequently alter the element from an external stylesheet (if there is one)?

e.g. 

$('#main').css('background-color', '#eee');

Since I have no inline <style> tags within my HTML, does the function look up the #main class in the linked external stylesheet?

Upvotes: 0

Views: 92

Answers (4)

Mudasser
Mudasser

Reputation: 315

jQuery works on client side, so it can not alter or change external linked stylesheet on server side. First it will select the element according to your selector and then put the css styles inline. You can check these inline styles by using Firebug in Firefox. We normally use .css() for runtime changes in css styles. If you want to apply styles from linked css stylesheet on runtime you can make a class and apply it by using addClass().

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68440

That code modify the inline style properties of the element. It doesn't touch at all your css file.

Your selector will look for an element with id = main and set style.backgroundColor = '#eee'.

Upvotes: 1

anotherdave
anotherdave

Reputation: 6764

JavaScript is operating on the computed DOM element, rather than modifying the stylesheets themselves in anyway. As far as I'm aware, the jQuery function will place the CSS at an equivalent level to setting it on the element itself, i.e.:

<div id="main" style="background-color: #eee;"></div>

Which is the highest level of targetting within CSS & will override anything else targetting that element (e.g. external stylesheets).

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78550

When using .css() as a setter, jQuery modifies the element's style property. For example, $('#mydiv').css('color', 'green') is equivalent to document.getElementById('mydiv').style.color = 'green'.

it sets the style attribute of the element and doesn't touch the external style sheets.

Source: http://api.jquery.com/css/#css2

Upvotes: 0

Related Questions