screen.width in css

I'm trying to convert my jquery css to an external css file but had some problems:

1. Is it possible to use sceen.width in an external css file? If not,

2. If I styled an element in an external css file and then used jquery to style the same element, which one will be overwritten?

Example:

jquery:

$("#mainBody").css(
{
   'margin-top':"5px",width: screen.width,
    position:"absolute",top:"135px"
});

external css:

#mainBody
{
   background:#f0eded;
   height:98px;
   margin-top:5px;
}

1. Is there a way to combine 开发者_如何学Goan external css file with jquery css? Thanks

---

Yes, your jQuery styles will override the styles in your stylesheet.

So, you could combine like this

#mainBody{
   background:#f0eded;
   height:98px;
   margin-top:5px;
   width:100px; //ARBITRARY... for example only
}

and

$("#mainBody").css('width', screen.width);

Example: http://jsfiddle.net/jasongennaro/94ZNz/

---

if #mainBody is position: absolute cant you just add the width to 100%?

---

You can combine both an external CSS file and styling from jQuery with no problems. Your external CSS definitions will be the base which jQuery will be changing.

The order of precedence is (lowest to highest):

1. External File
2. <style> tags
3. Inline

jQuery adds/changes the Inline portion so it has the highest priority.