Javascript won't overwrite CSS display property - Stack Overflow

admin管理员组

文章数量:1334342

I have a DIV that is set do display:none from CSS and it's supposed to be made visible (style.display = '';) at some point by javascript.

The problem is that if I put the display:none in the CSS file the javascript does not seem to have any effect. I have also tried changing the background color instead of the display property, and that works.

I have the code running here (just press the edit link).

I really thank you for taking the time to look into this.

I have a DIV that is set do display:none from CSS and it's supposed to be made visible (style.display = '';) at some point by javascript.

The problem is that if I put the display:none in the CSS file the javascript does not seem to have any effect. I have also tried changing the background color instead of the display property, and that works.

I have the code running here (just press the edit link).

I really thank you for taking the time to look into this.

• javascript
• css

Share Improve this question Follow edited Jan 1, 2011 at 23:46 jball 25k99 gold badges7272 silver badges9292 bronze badges asked Jan 1, 2011 at 23:33 Sorin ButurugeanuSorin Buturugeanu 1,12277 gold badges1313 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Set it to block or inline using Javascript.

Writing style.display = "" will clear any display set in the inline style, and cause it to revert to whatever it inherited from CSS.

Alternatively, you can change the element's className using Javascript so that the CSS rule no longer applies.

This is because style.display = '' only affects inline styles on an element. It doesn't change the style sheet.

You should set it to whatever display you need:

style.display = 'block';

or add a class that represents the style you want.

other way to hide content is use opacity=0 and to again make visible use opacity=1 thats it....!!!

本文标签： Javascript won39t overwrite CSS display propertyStack Overflow