SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    Barcelona
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic style switching problem

    It seems there is a problem if you want to change styles dynamically using javascript. Here is an example:

    This works:

    <script>
    function makegreen(id) { x=document.getElementById(id).style.color = "green"; }
    </script>

    <a id="item1" href="#888" onclick="makegreen(this.id)">Make me green</a>
    But this doesn't:

    <script>
    function changefont(id) { x=document.getElementById(id).style.font-family = "arial"; }
    </script>

    <a id="item2" href="#888" onclick="changefont(this.id)">Change the font</a>
    Looks like you can not do this with styles that use [-] like font-size, margin-top etc etc. If anyone knows a way around this please let me know.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The JavaScript properties use "camelCase", so you could do it like this:
    HTML Code:
    <script type="text/javascript">
    function changefont(o) {o.style.fontFamily = "Arial";}
    </script>
    
    <a href="#" onclick="changefont(this)">Change the font</a>
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All of the properties that have dashes in them have corresponding names in the dom like background-color is backgroundColor here's the answer to your specific problem:

    Code:
    <script language="JavaScript">
    <!--
    function changeFont(myID)	 {
      document.getElementById(myID).style.fontFamily = 'verdana';
      }
    //-->
    </script>
    EDIT: Looks like me and Cuckoo hit the button at the same time

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dc dalton
    All of the properties that have dashes in them have corresponding names in the dom like background-color is backgroundColor here's the answer to your specific problem:

    Code:
    <script language="JavaScript">
    <!--
    function changeFont(myID)	 {
      document.getElementById(myID).style.fontFamily = 'verdana';
      }
    //-->
    </script>
    EDIT: Looks like me and Cuckoo hit the button at the same time
    Another thing to look out for: float.

    Since float is a reserved keyword in Javascript, you have to use cssFloat instead

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    Barcelona
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent. Thanks a lot, thats sorted it.

    Havent found a problem yet that was not sorted out within minutes on this css forum.


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
  •