Dynamic css Property

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Jezternz
    New Member
    • Jan 2008
    • 145

    Dynamic css Property

    Okay basicly I wanna do the following:

    Code:
    var changetype = "backgroundColor";
    changevalue = "red";
    element.style.changetype = changevalue;
    Where changetype an changevalue could be anything. Is this possible? possibly using the eval function? the changevalue works fine, just getting it to register the dynamic property is a problem.
    My last resort will be a switch/case statement, but I would much rather a sigle/few lines of code.

    Thanks, Josh
  • hsriat
    Recognized Expert Top Contributor
    • Jan 2008
    • 1653

    #2
    Try this...[code=javascript]var changetype = "backgroundColo r";
    changevalue = "red";
    element.setAttr ibute('style', changetype+':'+ changeval+';');[/code]

    If it removes the other properties in style, then first use getAttribute and then replace the value.

    Comment

    • Jezternz
      New Member
      • Jan 2008
      • 145

      #3
      thanks! Got me thinking, and got this working:
      Code:
      if(window.attachEvent)
      elementdir.style.setAttribute('cssText',changetype+':'+changevalue+';'); 
      else elementdir.setAttribute('style',changetype+':'+changevalue+';');
      Only thing is it means I am limited to the css property's not the javascript properties, what I mean is I cant change things like innerHTML.

      But thats a good start, any other ideas?

      Comment

      • hsriat
        Recognized Expert Top Contributor
        • Jan 2008
        • 1653

        #4
        I think everything could be done with setAttribute, except innerHTML.
        Everything means... all style properties and all the attributes which come within the tag. But innerHTML is something which lies out of the tag. So may be you could just keep that aside with a simple if statement.

        Is there anything else I'm missing?

        Comment

        • Jezternz
          New Member
          • Jan 2008
          • 145

          #5
          thats a valid point. I might just go with that.
          Thanks heaps, Josh

          Edit: This will work but only when I only want to change a single property. as soon as I add a second property it deletes the previous one. So I made it so it just added ontop of the previous lot of cssText, only problem with that is u can end up with multiple definitions of the same property like "background:bla ck;background:b lue;background: green;" and this wont do. so back to square one :(

          Comment

          • hsriat
            Recognized Expert Top Contributor
            • Jan 2008
            • 1653

            #6
            Originally posted by Jezternz
            This will work but only when I only want to change a single property. as soon as I add a second property it deletes the previous one. So I made it so it just added ontop of the previous lot of cssText, only problem with that is u can end up with multiple definitions of the same property like "background:bla ck;background:b lue;background: green;" and this wont do. so back to square one :(
            Did you try getAttribute as I said in post #2?

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5388

              #7
              Originally posted by Jezternz
              Okay basicly I wanna do the following:

              Code:
              var changetype = "backgroundColor";
              changevalue = "red";
              element.style.changetype = changevalue;
              Where changetype an changevalue could be anything. Is this possible? possibly using the eval function? the changevalue works fine, just getting it to register the dynamic property is a problem.
              My last resort will be a switch/case statement, but I would much rather a sigle/few lines of code.

              Thanks, Josh
              doesn't the following simple adaption of your original code work?

              [CODE=javascript]
              var changetype = "backgroundColo r";
              changevalue = "red";
              element.style[changetype] = changevalue;
              [/CODE]
              kind regards

              Comment

              • acoder
                Recognized Expert MVP
                • Nov 2006
                • 16032

                #8
                That's absolutely correct. You can avoid eval in most cases in this manner. For example, if you have variables test1, test2, etc. and you need to access them using a loop, something like the following should allow you to do so:
                [code=javascript]for (i = 0; i < len; i++) {
                window["test"+i]... // equivalent to test1, test2, etc.
                }[/code]

                Comment

                • Jezternz
                  New Member
                  • Jan 2008
                  • 145

                  #9
                  yeh hsriat, the problem i was having went with setAttribute. Thanks though, and thanks for the final answer, I never would have guessed you could do that.

                  Comment

                  • hsriat
                    Recognized Expert Top Contributor
                    • Jan 2008
                    • 1653

                    #10
                    Originally posted by Jezternz
                    yeh hsriat, the problem i was having went with setAttribute.
                    setAttribute or getAttribute?
                    Originally posted by Jezternz
                    Thanks though, and thanks for the final answer,...
                    You are welcome :)
                    Originally posted by Jezternz
                    I never would have guessed you could do that.
                    Why? :(

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032

                      #11
                      Originally posted by hsriat
                      Why? :(
                      I think you've misunderstood. Sometimes you can use "you" to mean "one" or "anyone" (link).

                      I assume you're not joking and playing with words. If you were, sorry for the English lesson :)

                      Comment

                      • hsriat
                        Recognized Expert Top Contributor
                        • Jan 2008
                        • 1653

                        #12
                        Originally posted by acoder
                        I think you've misunderstood. Sometimes you can use "you" to mean "one" or "anyone" (link).

                        I assume you're not joking and playing with words. If you were, sorry for the English lesson :)
                        Ok, I really misunderstood that.
                        English isn't my first language. And I was never good in English at school. My English is just Hollywood movies' contribution.

                        Thanks for that lesson ;)

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032

                          #13
                          No problem. I did gather as much, though your English is pretty good for a second (or third?) language.

                          Comment

                          • hsriat
                            Recognized Expert Top Contributor
                            • Jan 2008
                            • 1653

                            #14
                            Originally posted by acoder
                            No problem. I did gather as much, though your English is pretty good for a second (or third?) language.
                            Thanks, its third ;)

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032

                              #15
                              I'll rephrase that then: your English is very good considering that it's your third language ;)

                              Comment

                              Working...