CODEWITHSUNDEEP
javascriptdomstylesdefault
Ricky Yoder
Ricky Yoder

Reputation: 571

How to get default CSS properties like jQuery?

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;

}

Upvotes: 2

Views: 1322

Answers (2)

bob-the-destroyer
bob-the-destroyer

Reputation: 3154

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.

Upvotes: 1

Kiran Ruth R
Kiran Ruth R

Reputation: 1012

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/

Upvotes: 0

Related Questions