How can I tell the element's default properties?

Discussion in 'CSS' started by TriKri, Jul 31, 2007.

  1. #1
    Hello!

    Is there some way to tell the default values for different properties to different object types?

    For example, the display property is said to be inline by default, but setting a table's display to inline will cause it to end up at the same line as the surounding text or objects, which it will not do by default. So, the default value for display cannot be inline for all objects. (or is it?) Is there some way to tell the default display value for the different objects? Or any other property as well?

    Edit: the intention was to do it in JavaScript
     
    TriKri, Jul 31, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Ok, I don't know WHO told you that, but it is WAY wrong.

    Block level elements (DIV, P, H1, H2, etc) are display:block by default. Inline level elements (SPAN, B, I) are display:inline by default. Other tags like images and objects are a wierd variation of display:inline-block (kind of), while if the browser supports CSS2 a table is actually display:table; by default... TD's are table-cell by default, etc, etc.

    Your BEST bet is going to be to just use CSS to set the value default in the first place so you are always sure, then you can set it in javascript by giving the element you want to manipulate an ID

    document.getElementByID("idname").style.display

    or parse a getElementsByTagName list...

    Which MAY be a readable property in some browsers, but I'm not sure. (some properties like innerHTML are write only, others like className are read/write - you'd have to test) - just be warned some browsers do not support the entire CSS2 spec properly/fully, so using inline-block, table-cell, etc can have REALLY unpredictable results cross-browser.
     
    deathshadow, Jul 31, 2007 IP
  3. TriKri

    TriKri Peon

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Huh, strange, W3School describes inline as default. http://www.w3schools.com/css/pr_class_display.asp

    Anyway, I would like to create a toggle function, which makes elements toggle between visible/invisible. So, if an element has a display value which is not 'none', it will be set to none. But what if it has ben toggled off and I want to change it back to what it was before, then can I find out wat it was before? Or is there some other clever way to solve it? I think it would have been more intuitively just to have a visibility property as well to toggle, but that's just my opinion.
     
    TriKri, Jul 31, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Sorry to break it to you, but they get a LOT of details wrong... Which is why one should go to the ACTUAL W3C specification. (remember, W3Schools is NOT affiliated with the W3C in any way shape or form) For the actual default for all tags, YES it is inline, however as said at:

    http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop

    That default may be overridden by your doctype's default values... A good example of which is here:

    http://www.w3.org/TR/REC-CSS2/sample.html

    Which is pretty much what Opera and Safari use for their defaults on HTML 4 - FF comes close but has a few 'issues' still, and IE is just plain 'out there' (since all the 'table' display properties don't actually exist in IE6/earlier, and I'm not 'sure' about 7) The default stylesheets overrides for HTML 4 and XHTML 1.x change that so called 'default' inline to something else. (which is why I think calling the the default is #DDD)

    One also has to take 'replaced' elements into account which may be inline or inline-block depending on the implementation.

    The best way to do that is with two classes. One set to display:none and one set to display:block, and swap classes... Especially since I'm 100% certain className is readable. You could even make it so they only need the class added, then onload parse the document for them. Would also mean less HTML and no need for ID's - always a good thing.

    If I have time tomorrow, I'll toss together an example for you. (I have one here somewhere, but it eludes me at the moment)
     
    deathshadow, Jul 31, 2007 IP