SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Can someone confirm: can JS reference external style sheet values

    Hi,

    I've been reading a book on JScript that is a couple of years old. It says it is impossible to reference CSS that is stored in an external style sheet.

    However i read the Prototype manual here, and it says that you can. Is this just the amazingness of Prototype or has something more fundamental changed to allow JS to reference the CSS?

    Can someone confirm one way or another?
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  2. #2
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, can anyone confirm whether you can zip up the prototype library and serve it to the browser in that form? I heard that the browsers accept zipped up content as well, and will be able to use it just the same.

    Is this true?
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    It should be able to, kinda. Javascript doesn't directly access the data in an external stylesheet, it accesses the attributes of the specific elements themselves. So, if you apply the CSS first and then apply the Javascript, you are able to, essentially, access the values in the external stylesheet.

  4. #4
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. So if I set some colors of menu <li>'s in CSS, then wrote a bit of JS and told it to retrieve and alter those values on mouseover, then this should work?
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can find the accumulated css values of an element in most browsers.
    In this example, pass a reference to an element and the camelCase form of the style property-that is, 'fontSize', rather than 'font-size'.
    That is how IE expects it, and the function will convert it as needed for the other browsers.
    Code:
    document.deepCss= function(who, str){
    	var val= who.style[str] || ''; // inline styles trump the cascade
    	if(!val){
    		if(who.currentStyle) val= who.currentStyle[str]; // IE only
    		else{
    			var dv= document.defaultView || window; // The other browsers
    			if(dv.getComputedStyle){
    				if (/[a-z][A-Z]/.test(str)) {
    					// hyphenate-property-names
    					str= str.replace(/[A-Z]/g,function (w) {
    						return "-" + w.toLowerCase();
    					});
    				}
    				val= dv.getComputedStyle(who,'').getPropertyValue(str);
    			}
    		}
    	}
    	return val || '';
    }
    //test
    document.deepCss(document.body,'fontSize')

    The return values reflect the way the browser has rendered the element, not necessarily the literal css source.
    The mozillas return most size values in 'px' and color values in RGB, no matter how you set them,
    and IE has problems with shortcut style assignments.

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mrhoo: I think that's the first time I've seen anyone assign a custom function to be a method of the document object. Why not window? Or why not just..

    Code:
    var deepCss = function() { }
    or

    Code:
    function deepCss() {}
    Or does it have something to do with how it getting the CSS?

  7. #7
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It could be anything- a global window function, or a method of any object.

    But I am stingy with globals, and I don't know what objects get dave has on hand.

    Since it's main argument is an element in the document, I figured the document object would be a logical owner for it, at least for testing purposes.

    And everybody's got document...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •