SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using javascript to change specific css parameter

    Hey, I would like to achieve something to this effect...
    Code:
    document.getElementById('hello').style.border-top = "2px red solid";
    What I'm trying to do is just change the top border color of something I defined with css. The code above of course didn't work.. heh. How would I do it?

    Thanks,
    dave
    Last edited by dtang4; Nov 5, 2003 at 15:09.

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.getElementById('hello').style.borderTop = "2px red solid";

    I see you've taken the 'I think I'll type this in & see what error message I get' approach to scripting. I like that.
    ::: certified wild guess :::

  3. #3
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome. Thanks for the help.

    Can you point me to a resource that'll list everything I can plus after "style."? Ie. every possible par for style.par = "something"

    Yes haha... my strategy is somewhat unrefined, heh

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ::: certified wild guess :::

  5. #5
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Theoretically, you should be able to access all CSS properties, just like you were trying to. You're nearly there, but you're missing one vital bit of information: hyphens are invalid characters in javascript identifiers.

    This means that, when attempting to access a property that, like border-top, has a hyphen in the name, you can't just use the regular CSS property name. Therefore, when accessed this way, you have to use a different property name.

    But what's the property name?
    1. Take the name of the CSS property you want to access
    2. capitalise the first letter of each word after the first
    3. Remove the hyphens

    Thus, border-top becomes borderTop; list-style-type becomes listStyleType; background-color becomes backgroundColor, and so on.

  6. #6
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh wow!

    Awesome, thanks a lot for the info. That'll give me much more power in coding now.. muAhaHa

  7. #7
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blufive
    But what's the property name?
    1. Take the name of the CSS property you want to access
    2. capitalise the first letter of each word after the first
    3. Remove the hyphens
    Thus, border-top becomes borderTop; list-style-type becomes listStyleType; background-color becomes backgroundColor, and so on.
    How would I set the background image? I tried

    HTML Code:
    document.getElementById('id').backgroundImage = "url to image"; //and
    document.getElementById('id').backgroundImage = "url('url to image')";
    Both of which didn't appear to work.

  8. #8
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at http://msdn.microsoft.com/library/de...ence_entry.asp for a nice overview of the objects and their respective properties. You can go to the object list, pick a particular object, and it'll then serve you with both the in-tag properties, CSS properties, and scripting access to the CSS properties.

    Ofcourse it's cut to microsoft browsers, but even then it's still a very good overview of a lot of properties available in almost all browsers. I never needed anything else than that.

  9. #9
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that resource is rocking.

    Thanks a lot!

  10. #10
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well - first of all: where's that Style object?
    Code:
    document.getElementById('id').style.background = "url(url to image)";
    You can use the background property: it includes all the background properties, in one place, explained here. .backgroundColor will do as well. Your other problem: the entire string - "url(url to image)" - goes inside the quotes (it's the property's value) - and it's one, not two, strings.

    Disagree about the msdn docs; Microsoft has tons of non-standard, proprietary items. If you learn by referring to them, you'll spend a lot of time wondering why things don't work elsewhere.

    http://academ.hvcc.edu/~kantopet/css/index.php
    ::: certified wild guess :::

  11. #11
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, forgot to type the style part, heh.

    Great, thanks a lot! I'll check out that link.

  12. #12
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Microsoft also only halfly implement normal CSS standards, hence making the reverse true: By using msdn you make sure you dont have to wonder why it doesnt work in IE. For example the :hover psuedo class and the CSS identifiers for siblings etc. I rather have it right the first time for 90% of the visitors, then polish to make it work for the minorities as well

    Anyways, use what you like, and lets all hope all but one browser dies soon, so we can finally have a peaceful and easy world

  13. #13
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Is there a way you can set the CSS in javascript before the object has been applied without using document.write(<style>............................)
    I have browser specific CSS, no scroll-bars, rounded corners, rotating (turning) filters etc.....
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  14. #14
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I rather have it right the first time for 90% of the visitors, then polish to make it work for the minorities as well
    Maybe - but the trend is towards standards-compliance, and if you're learning this from scratch, it's better - imo - to learn what works cross-platform from the outset, rather than 'fixing' one thing after another when you discover which 'solutions' are M$pecific.

    Often it's not just a matter of 'polishing' something (or did you mean 'Polish minorities' ?)

    Seen enough on boards like this to know the routine...(HELP!!! Script won't work in Netscape...emergency!!!)

    http://www.zeldman.com/daily/0203a.shtml#debacle
    ::: certified wild guess :::

  15. #15
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Markdidj:
    Well, you can ofcourse build the CSS in memory, there are functions and objects available for that purpose. After that you can just create new html elements and then using adjacent/beforeEnd inserts to put them in the html next to/inside a placeholder HTML element.

    adios:
    I dont think you have been reading well. By following the docs you gave you will run into the very same compatibility problems, but then with IE not working. They are not cross-platform (you meant cross browser probably), nor cross-browser, since IE just wont take what you write.

    The only thing that I want to point out really is that none of the two aproaches is better in essence, since they will both leave a browser in failure.

    I quoted the percentage as a means of outlining why my personal preference goes out to writing for IE. I can imagine there are reasons why one would like to start out with Netscape (prolly standards complying) code and then polishing/patching it for IE tho. I was curious about them really.

  16. #16
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change the link colour of the id

    Wow, this topic is still on the first page! haha

    Ok, I have another related question. I want to change the link colour of the id. This is what I tried...

    Code:
     
    document.getElementById('idname').style.a.color = "black";
    document.getElementById('idname').a.style.color = "black";
    both of which didn't work. How would I go about doing this?

    (Sorry if this is self-evident.. heh)

  17. #17
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to change the link colour of the id.
    Let's see the HTML you're referring to...
    ::: certified wild guess :::

  18. #18
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure.

    Let's say this is my style sheet code:
    Code:
    #main_nav {width:100%; background:#FF6600; font-size:10px; padding: 4px 4px 4px 60px; color:#FFFFCC; }
    #main_nav a {margin:1px; padding:3px; color: white; text-decoration:none}
    It is being applied here:
    Code:
     <div id=main_nav> 
    hello, here is a <a href=http://google.com>link to google</a>.
    </div>
    I would like a javascript function that will change the color of the "link to google" text.

  19. #19
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    #main_nav {width:100%; background:#FF6600; font-size:10px; padding: 4px 4px 4px 60px; color:#FFFFCC; }
    #main_nav a {margin:1px; padding:3px; color: white; text-decoration:none}
    
    </style>
    
    </head>
    <body>
    <div id=main_nav>hello, here is a <a id="googlelink" href=http://google.com>link to google</a>.</div>
    <a href="#null" onclick="document.getElementById('googlelink').style.color='#0f0';return false">change link color</a>
    </body>
    </html>
    ::: certified wild guess :::

  20. #20
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that the only way to do it?

    Cause, I plan to have a lot of links. I would then need to create an id for each link. Is there some anomaly to...
    document.getElementById('main_nav').style.aColor = "black";
    that works.. heh.

  21. #21
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var main_nav = document.getElementById('main_nav');
    var nav_links = main_nav.getElementsByTagName('a');
    for (var a_link, i = 0; i < nav_links.length; ++i)
    {
    	a_link = nav_links.item(i);
    	a_link.style.color = '#0f0';
    }
    ::: certified wild guess :::

  22. #22
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, nice. Thanks a lot!


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
  •