SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    get css declaration values?

    I have something that has to be set with javscript via document.write() but I want to be able to control some of the values via css. so is there a way to get a css value via javascript?

    say the css was a linked style sheet called mycss.css and the declaration I was trying to receive was the width and the height, and the css looked like this:

    Code:
    #VideoOverlay{
    	height: 380px; 
    	width:269px;   
    }

    Thanks!!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  2. #2
    SitePoint Addict Phidev's Avatar
    Join Date
    Oct 2008
    Location
    Texas
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    getElementById('VideoOverlay').style

    This object contains the attributes related to the style, such as the background color and so on.

    Here is a list of the variables within style

    http://www.comptechdoc.org/independe...javastyle.html

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Phidev View Post
    getElementById('VideoOverlay').style

    This object contains the attributes related to the style, such as the background color and so on.

    Here is a list of the variables within style

    http://www.comptechdoc.org/independe...javastyle.html
    That won't work because the styles have not been set inline. Instead 'halfasleeps' will have to retrieve the computed style of the element which equates to that specified in the stylesheet.

    Look here: http://www.robertnyman.com/2006/04/2...of-an-element/
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much guys that is good information you have provided but not exactly what I need.....let me explain my problem better.


    I am trying to use CSS to control the size of a flash movie. The flash movie is embed via a javascript code:

    Code:
    if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
    	alert("This page requires AC_RunActiveContent.js.");
    } else {
    	var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
    	if(hasRightVersion) {  // if we've detected an acceptable version
    		// embed the flash movie
    		AC_FL_RunContent(
    			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0',
    			'width', '269',
    			'height', '380',
    			'src', 'VideoOverlay/trans_test',
    			'quality', 'high',
    			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
    			'align', 'middle',
    			'play', 'true',
    			'loop', 'true',
    			'scale', 'showall',
    			'wmode', 'transparent',
    			'devicefont', 'false',
    			'id', 'VideoOverlay',
    			'bgcolor', '#ffffff',
    			'name', 'VideoOverlay',
    			'menu', 'false',
    			'allowScriptAccess','sameDomain',
    			'allowFullScreen','true',
    			'movie', 'VideoOverlay/trans_test',
    			'salign', '',
    			'FlashVars','overlayVideo=simon_g.flv' 
    			); //end AC code
    	} 
    }
    This code takes the fields and puts them in embed/object tags using document.write() however you can see that the id is called VideoOverlay yet when I try to control it with css it does not do anything even when I pass the !important flag:

    Code:
    #VideoOverlay{
    	height: 380px; 
    	width:269px;  
    }

    so I figured if I could just read those values in the declaration I could pass them in the javascript function call for the width and height. but I cant use the scripts you guys provided because at the time I need them, the element hasn't been created yet.

    I hope this made since.


    THANKS!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You either have to hard code them in the JavaScript or wait until the element has been created in the page in order to test it. Before then there is nothing for the JavaScript to access to find the size as it can't read files in order to access the stylesheet directly. If it must be done before the element loads in the page then you could use a server side language to read the CSS and update the JavaScript with those values.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •