SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript style.what

    When applying style does it always relate to the CSS property?
    Though the - is subtracted? This is just to clarify, seems to work right.
    ...
    {
    if (highlight){
    anobject.style.backgroundColor = '#dcddd0';
    anobject.style.color = "#000";
    anobject.style.fontWeight = "bold";
    }
    ...

    so fontWeight would replace font-weight?

    Outside of the style attributes is there any way to find all methods and properties?

    also is there a way to easily de-apply the if statement without reverting back to the default document settings, ie if you changed your css.
    else {
    anobject.style.backgroundColor= "transparent";
    anobject.style.fontWeight = "none";
    anobject.style.color= "none"; ?
    }

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's pretty much it. Hyphens are replaced with camel case. There is a list over here:

    http://developer.mozilla.org/en/docs/DOM:CSS

    The float property varies. With IE it's styleFloat, with everyone else it's cssFloat. You can deliver the right one using property detection or you can just set both of them, the wrong one should fail silently in each case.

    To "de-apply" them, just set them to a blank string:

    Code:
    anobject.style.backgroundColor = '';
    Then whatever is specified in the style sheet with the highest specificity will be applied.

  3. #3
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats cool thanks Raffles

    is there a way to define a class in the .style method?
    That is if I didn't want to use an event. (Wrapping my head around this)

    anobject.style.borderLeftColor = "1px solid #fff;"

    no dice, oh sorr yi see a link you posted now

    **Edit**
    From the link you posted it appears everything must be done without CSS shorthand, thanks for that link!

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When switching a number of styles it is often simpler to change the css class of the element, rather than all of the individual styles.
    Code:
    if (highlight) {
      el.className = "newClass";
    } else {
      el.className = "oldClass";
    }
    Then set the styles you want via CSS declarations.

    Note, you may need more sophisticated style-swapping methods if your elements may have more than one class.

  5. #5
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh wow that is very cool, Im going to try that one out

    Im having trouble figuring the shorthand css and even applying it longhand,

    obj.style.borderWidth = '3px';
    obj.style.borderColor = '#ddd';
    obj.style.borderStyle = 'solid';

    Does this not apply?

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    style isn't a method, it's an object with properties. Methods are functions, style is just a container with lots of properties in it.

    is there a way to define a class in the .style method
    Not sure what you mean by that, but take heed of what r51 posted, it's sound advice.

    Im having trouble figuring the shorthand css and even applying it longhand,

    obj.style.borderWidth = '3px';
    obj.style.borderColor = '#ddd';
    obj.style.borderStyle = 'solid';

    Does this not apply?
    That should work. You can also do obj.style.border = '3px solid #DDD'. If it isn't working you might have an error elsewhere. I hope you're using Firebug.

  7. #7
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trying to run this, would you be so kind to point out what Im doing wrong ?

    For startes I fixed the "flase" to "false" haha.. this is embarassing, my apologies for not using firebug.
    <span onmouseover="swap(this, true);" onmouseout="swap(this, false);">Text Background Swap</span>

    Code HTML4Strict:
    <html>
    <head>
     
    <title>Temp</title>
     
    <style>
     
    .changed {background-color: #FF0000;}
     
    </style>
     
    <script type="text/javascript">
     
    function swap(el, highlight)
    {
        if (highlight){
        el.foo = 'changed';
        }
     
        else{
        el.foo = '';
        }
    }
    </script>
    </head>
    <body>
     
     
    <span onmouseover="swap(this, true);" onmouseout="swap(this, false);">Text Background Swap</span>
     
     
    </body>
    </html>

  8. #8
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    That should work. You can also do obj.style.border = '3px solid #DDD'. If it isn't working you might have an error elsewhere. I hope you're using Firebug.
    I used the HTML Validator Add on, I have firebug running and I am not too sure how it all works (besides when there is a red checks), I am embarassed to say I dont know how to debug javascript with it (if it could thatd be awesome), Ill read up on the documentation no need to explain I appreciate your help you guys

    **Edit** Okay I see things running under "Console" on firebug (yeah i am embarassed), haha this thing is SWEET I never applied it to Javascript (blush)

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Basically, when Firebug shows a red circle, click it and it'll show you the error. It's pretty easy. Understanding the error can be a little harder, but it tells you the exact line the error is on, so you can see where it is.

    Well, it isn't working because el.foo is meaningless. I think you want el.className. Also, you've spelled "false" as "flase". And I hope you're not actually going to use inline event handlers in your HTML and that they're just for testing.

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should el.foo be el.className?

  11. #11
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    el.foo
    =>
    el.className

  12. #12
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having trouble swapping the class am I doing something wrong?
    Sorry I named my first class foo then get confused. :P

    Im doing this for practice and learning JS not for an actual application yet anyways. Ive never used this style stuff in JS and it seems awesome.

    I want to run this in standard JS rather than jQuery for the sake of learning.


    Code HTML4Strict:
    <html>
    <head>
     
    <title>Temp</title>
     
    <style>
     
    .first {background-color: yellow;}
    .changed {background-color: #FF0000;}
     
     
    </style>
     
    <script type="text/javascript">
     
    function swap(el, highlight)
    {
        if (highlight){
        el.first = 'changed';
        }
     
        else{
        el.first = '';
        }
    }
    </script>
    </head>
    <body>
     
     
    <span class="first" onmouseover="swap(this, true);" onmouseout="swap(this, false);">Text Background Swap</span>
     
     
    </body>
    </html>

    I see el.first => el.changed does cause me an error of "Swap" not being defined, I dont see it.

    Also I havent seen this => operator, what is it? I dont think Ive ever used this in PHP either, I have charts I look but I cant find this operator listed.

  13. #13
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function swap(el, highlight)
    {
        if (highlight){
        el.className = 'changed';
        }
     
        else{
        el.className = 'first';
        }
    }

  14. #14
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    el.className is a property that refers to the class attribute. You can change the class name to a value:
    Code:
    el.className = 'first'
    That is equivalent to:
    Code:
    <span class="first">...</span>
    So, again, you want it to be el.className = 'changed'

    This has nothing to do with the style object. In other words, el.style and el.className are unrelated.

  15. #15
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh className is an actual method!

    I learn by going through this an messing around this helps a lot thanks you guys

    in the dot syntax, el.className, el is just any object? Im guessing it was named short for element -- I dont follow what it actually does in a case like this. Does that make sense?

    It appears el is an object that is targeted as "this" in the events, is that correct? I feel like I know what Im talking about but not really :P

    Code HTML4Strict:
    <html>
    <head>
     
    <title>Temp</title>
     
    <style>
     
    .first {background-color: yellow;}
    .changed {background-color: red;}
     
     
    </style>
     
    <script type="text/javascript">
    function swap(el, highlight)
    {
        if (highlight){
        el.className = 'changed';
        }
     
        else{
        el.className = 'first';
        }
    }
     
    </script>
    </head>
    <body>
     
     
    <span class="first" onmouseover="swap(this,true);" onmouseout="swap(this,false);">Text Background Swap</span>
     
     
    </body>
    </html>

  16. #16
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It appears el is an object that is targeted as "this" in the events
    Correct. In your html code you assign a function to occur when the "onmouseover" event happens, and you pass it two arguments:
    swap(this,true);

    "this" is a keyword meaning "this dom element", so when your function gets called, the first argument (translated to "el") is the dom element that the event happened to.

  17. #17
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks

    function(this, boolean)

    That makes sense, i just like knowing what Im doing!

  18. #18
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    className is not a method, it's a property of all Element objects that can accept class names (which I think is all of them except html, head and title).

    I think Douglas Crockford's Survey of JavaScript would be a good read for you (and anyone interested in JavaScript).

  19. #19
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thats a great article thanks raffles !!


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
  •