How to modify a CSS display property from JavaScript

Question

I m trying to change the display CSS property of a  lt div gt  tag when the user changes the value of a  lt select gt    Here is my HTML code     lt select type  text  name  category  onblur  display hidden fields     gt       lt option gt  lt  -- Content -- gt  lt  option gt       lt option gt  lt  -- Content -- gt  lt  option gt   lt  select gt    lt div id  hidden  style  display none   gt       lt label for  test  gt Label lt  font gt  lt  label gt       lt select type  text  name  test  gt           lt option value  1  gt Default lt  option gt           lt option value  2  gt Value1 lt  option gt           lt option value  3  gt Value2 lt  option gt       lt  select gt   lt  div gt     note that s a simplified version of my code  Actually  every  lt label gt  and  lt select gt  are in  lt td gt   I think it doesn t matter    Now  my JS code    function display hidden fields         alert  JS Function        document getElementById  hidden   style display    block        Well  When I select a new  lt option gt  in the first  lt select gt  named  category   I get the alert  JS Function   So my display hidden fields   function is correctly executed  But the second line of this function does    nothing   My  lt div gt  named  hidden  is not displayed     It seems to me there is nothing wrong in my code  Moreover  I tried many variants   - Like specifying style  display block  in the  lt div gt  properties  and changing it to  none  in the JS   - Or trying to use other properties like  inline    inline-block        - Or using  visibility  instead of  display   - Or not specifying any property at all in the HTML   Does anyone can help me       Thanks     EDIT  Important observation  I think I found something interesting  It seems that a  lt div gt  with display none  mixed with  lt tr gt  and  lt td gt  is completely nonfunctional  Here is my real code     lt tr gt       lt div id  hidden  style  display none   gt           lt td class  depot table left  gt               lt label for  sexe  gt Sexe lt  label gt           lt  td gt           lt td gt               lt select type  text  name  sexe  gt                   lt option value  1  gt Sexe lt  option gt                   lt option value  2  gt Joueur lt  option gt                   lt option value  3  gt Joueuse lt  option gt               lt  select gt           lt  td gt       lt  div gt   lt  tr gt    The content of the  lt div gt  is still displayed  And I can try to change it in any way in JS  it doesn t work  I also tried to remove the  lt table gt    lt tr gt  and  lt td gt  tags  and it works fine  But I need this table

User · Answer

I found the solution   As said in the EDIT of my answer  a  lt div gt  is misfunctioning in a  lt table gt   So I wrote this code instead     lt tr id  hidden  style  display none   gt       lt td class  depot table left  gt           lt label for  sexe  gt Sexe lt  label gt       lt  td gt       lt td gt           lt select type  text  name  sexe  gt               lt option value  1  gt Sexe lt  option gt               lt option value  2  gt Joueur lt  option gt               lt option value  3  gt Joueuse lt  option gt           lt  select gt       lt  td gt   lt  tr gt    And this is working fine   Thanks everybody

User · Answer

CSS properties should be set by cssText property or setAttribute method      Set multiple styles in a single statement elt style cssText    color  blue  border  1px solid black       Or elt setAttribute  style    color red  border  1px solid blue       Styles should not be set by assigning a string directly to the style property  as in elt style    color  blue     since it is considered read-only  as the style attribute returns a CSSStyleDeclaration object which is also read-only

User · Answer

It should be document getElementById  hidden   style display    block   not document getElementById  hidden   style display    block      EDIT due to author edit   Why are you using a  lt div gt  here  Just add an ID to the table element and add a hidden style to it  E g   lt td id  hidden  style  display none  class  depot table left  gt

[javascript] How to modify a CSS display property from JavaScript?

Examples related to javascript

Examples related to html

Examples related to css