How to get default CSS properties like jQuery?

Question

Evening!

For my basic JavaScript library, I've gotten kind of stumped looking at how to get and set the absolute DEFAULT CSS properties--like in jQuery.

For example, after looking at the jQuery source, I can see that for the show(), hide(), and toggle() methods is that there is a function, showHide() (snippet at the bottom), that accesses a method called, "._data" to retrieve the "olddisplay" of the element(s).

I only know of window.getComputedStyle, which changes when an element has a style applied to it. And if the original style of a <div> was "display:none", how can you get the old display when "display:none" would be the oldest record of CSS?

Are "cascaded rules" those original styles by any chance?

There is also a function in the code snipped called, css_defaultDisplay() which has something to do with an iframe? Is there any easier way to do all of this?

Thanks for the replies everybody.

Edit: Couldn't I just make a new element from the tagName of the element I want to get the style of and get IT's computed style?

Code snippet from jQuery 1.10.2 source:

function showHide( elements, show ) {
var display, elem, hidden,
    values = [],
    index = 0,
    length = elements.length;

for ( ; index < length; index++ ) {
    elem = elements[ index ];
    if ( !elem.style ) {
        continue;
    }

    values[ index ] = jQuery._data( elem, "olddisplay" );
    display = elem.style.display;
    if ( show ) {
        // Reset the inline display of this element to learn if it is
        // being hidden by cascaded rules or not
        if ( !values[ index ] && display === "none" ) {
            elem.style.display = "";
        }

        // Set elements which have been overridden with display: none
        // in a stylesheet to whatever the default browser style is
        // for such an element
        if ( elem.style.display === "" && isHidden( elem ) ) {
            values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
        }
    } else {

        if ( !values[ index ] ) {
            hidden = isHidden( elem );

            if ( display && display !== "none" || !hidden ) {
                jQuery._data( elem, "olddisplay", hidden ? display : jQuery.css( elem, "display" ) );
            }
        }
    }
}

// Set the display of most of the elements in a second loop
// to avoid the constant reflow
for ( index = 0; index < length; index++ ) {
    elem = elements[ index ];
    if ( !elem.style ) {
        continue;
    }
    if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
        elem.style.display = show ? values[ index ] || "" : "none";
    }
}

return elements;

}

I'm not sure what you mean. Default as in default for the standard HTML element, default as is set in your own css stylesheet and thus before any jquery styling is applied, or...? I hate to say, but I think "Default" is kind of ambiguous. — bob-the-destroyer
– bob-the-destroyer, Commented Jul 13, 2013 at 2:50
OK, so, when you originally create a DIV element and don't apply ANY styles to it yourself, it's "default", or "normal" display is "block". If I style it in my STYLE tag and say div{display:none;}, I can no longer get the "supposed-to be" display of the DIV. — Ricky Yoder
– Ricky Yoder, Commented Jul 13, 2013 at 2:52
Also, what jquery version, browser type and version are you working with? — bob-the-destroyer
– bob-the-destroyer, Commented Jul 13, 2013 at 2:53
Ricky Yoder: so basically, you want to get browser standard default values for the element? — bob-the-destroyer
– bob-the-destroyer, Commented Jul 13, 2013 at 2:54

bob-the-destroyer · Accepted Answer · 2013-07-13 04:27:52Z

1

Probably not a complete answer, especially since you asked for an easier method other than using an IFRAME, but I just thought this was interesting why jquery used an iframe to get default css. It's because elements in an iframe ignore your site's css regardless of origin or complete lack of src...

<script src="jquery-1.10.2.js" type="text/javascript"></script>

<style type="text/css">

    div {
        background-color: black;
    }

</style>

<script type="text/javascript">

    $( document ).ready( function() {
        alert( $("#parentTest").css( "background-color" ) ); // rgb(0,0,0)
        $( '#iframeTest' ).ready( function() {
            var iframeDivTest = $("#iframeTest").contents().find( "body" ).html( '<div></div>' );
            alert( iframeDivTest.css( "background-color" ) ); // transparent
        });
    });

</script>

<div id="parentTest">???</div>

<iframe id="iframeTest"></iframe>

So if you want defaults without interference from style sheets, then creating a dummy, sourceless, and hidden IFRAME/sandbox for your javascript to play in would probably be the way to go.

Ultimately though, you may want to email Jquery creators to get their input on how they solved this problem. Jquery is open source. I doubt they'll mind the question.

edited Jul 13, 2013 at 4:27

answered Jul 13, 2013 at 3:45

bob-the-destroyer

3,1092 gold badges25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ricky Yoder Over a year ago

Ah. I see now. With my suggested idea, once you append the element to the document, it is styled by the page's output CSS (if any that applies to the element), so therefore using an iframe WOULD be the only way. Thanks for the answer, and I'll be sure to email them about this! :)

Community · Accepted Answer · 2017-05-23 10:32:08Z

0

I think what you are trying to do is set arbitrary data on an html element .When it is about to change you want to access the data of the element to find the previous value. If that is the case then you can take a look at this

How to store arbitrary data for some HTML tags

and here is an article that will give you more info about this

http://james.padolsey.com/javascript/element-datastorage/

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jul 13, 2013 at 2:43

Kiran Ruth R

1,0121 gold badge12 silver badges28 bronze badges

1 Comment

Ricky Yoder Over a year ago

Well, the title is actually misleading. At the moment, I only want to get the original display. (I'm taking a look nonetheless)

Collectives™ on Stack Overflow

How to get default CSS properties like jQuery?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related