Set styles dynamically in javascript

Question

I have to set margin dynamically to an element. Earlier it was done by like following.

var starLink = star.createChild({
            tag: 'a',
            html: this.values[i],
            href: 'javascript:void',           
            title: this.showTitles ? this.titles[i] : ''
        });

        // Prepare division settings
        if(this.split) {
          var odd = (i % this.split);              
          star.setWidth(sw);
          starLink.setStyle('margin-left', '-' + (odd * sw) + 'px');          
        }

But now I changed my code as below. How will I set the margin here?

var starLink = document.createElement('a');        
        starLink.href = 'javascript:void';         
        starLink.title = this.showTitles ? this.titles[i] : '';
        starLink.innerHTML = this.values[i];
        star.appendChild(starLink);

 // Prepare division settings
        if(this.split) {
          var odd = (i % this.split);              
          star.setWidth(sw);
          starLink.setStyle('margin-left', '-' + (odd * sw) + 'px');              
        }

element.style.margin or maybe you should use setAttribute method? — user1326628
– user1326628, Commented Dec 18, 2012 at 6:40
I tried. But dont find the correct method. Could you please give me a sample code? — nr.iras.sk
– nr.iras.sk, Commented Dec 18, 2012 at 6:41

Ilya.R · Accepted Answer · 2012-12-18 06:42:05Z

2

starLink.style.marginLeft='10px' or starLink.style.margin = "0px 0px 0px " + xOffset + "px";

answered Dec 18, 2012 at 6:42

Ilya.R

417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nr.iras.sk · Accepted Answer · 2012-12-18 06:52:52Z

0

How about

var starLink = document.createElement('a');        
starLink.href = 'javascript:void';         
starLink.title = this.showTitles ? this.titles[i] : '';
starLink.innerHTML = this.values[i];
star.appendChild(starLink);

// Prepare division settings
if(this.split) {
    var odd = (i % this.split);              
    star.setWidth(sw);
    starLink.style.marginLeft = '-' + (odd * sw) + 'px';              
}

edited Dec 18, 2012 at 6:52

nr.iras.sk

8,59829 gold badges85 silver badges117 bronze badges

answered Dec 18, 2012 at 6:41

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Collectives™ on Stack Overflow

Set styles dynamically in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related