How to edit the element.style css?

Hi I am using a jquery modal pop up. See picture below.

However, the problem is, I need to edit the width. So I typed in th开发者_开发知识库e css file, after checking and verifying with firebug,

element.style 
{
    width: 700px !important;
}

But it does not work. ANy ideas as how to override the jquery css.

Some say the need to edit the css using javascript, making objects and stuff. But I'm not so sure about that.

Any help is appreciated.

element.style in Firebug is the style applied to the element, for exemple

<span style="padding: 10px;">My text</span>

element.style will have

element.style 
{
    padding: 10px;
}

to override, the best way is to cleat the style attribute, append a class name and write the CSS you need.

Regarding your modal problem, if you are using jQuery UI Dialog component, why don't you set the width programmatically, like:

$( ".selector" ).dialog({ width: 460, maxWidth: 460, minWidth: 460 });

You will need to clear the width from the <div> element itself. It is flagged as important so you can't override it.

element.style is not a valid CSS selector. You would have to target the element using it's class or id, if it has one, otherwise you'd need to use traversal to target the element in either CSS, or with jQuery.

This should work.

The div [style^= is the Div 'Element Style' where you are able to modify any CSS Element.

For Example: If the actual 'Element Style' width is 300px.

div [style^="width: 300px"]{
     width:700px !important;}

This forces to overwrite the Element Style to width 700px.