How do you organize Javascript verboseness?

Question

Hey guys

I am coding a GM script, and one thing I realised that I'm doing repeatedly is doing the same code over and over again. Specifically, the style property.

function createButton() {
    var a = document.createElement('a');
    a.href = '#';
    a.innerHTML = 'Print Topic';
    a.style.position = 'absolute';
    a.style.right = '3em';
    a.style.top = '6em';
    a.style.fontFamily = 'Arial,Helvetica,sans-serif';
    a.style.fontWeight = 'bold';
    a.style.fontSize = '125%';
    a.style.background = '#777777 none repeat scroll 0 0';
    a.style.color = 'white';
    a.style.padding = '6px 12px';
    document.body.insertBefore(a, document.body.lastChild);
}

As you can see in my sample code, I repeatedly wrote a.style a lot of times. Do you have techniques that you use to avoid this mess? Just for the sake of gracefulness.

THANKS --

Guys, here's the reduced code:

function createButton() {
    var a = document.createElement('a');
    var css = document.createElement('style');
    css.type = 'text/css';
    css.innerHTML = '#prt { position:absolute; right:3em; top: 6em; font-family: Arial,Helvetica,sans-serif; font-weight:bold; font-size:125%; background: #777777 none repeat scroll 0 0; color: white; padding: 6px 12px;}'
    a.href = '#';
    a.innerHTML = 'Print Topic';
    a.id = 'prt';
    document.body.insertBefore(a, document.body.lastChild);
    document.body.appendChild(css);
}

LOL, that certainly looks better

Answer 1

Put the style attributes into CSS classes, then just dynamically swap the classes instead of doing each style attribute explicitly.

Answer 2

The not-very-good-but-possibly-better-than-the-original answer:

s = a.style;

s.position = "absolute";
...etc...
s.color = "white";

Answer 3

Try

If you were using jQuery you could write:

$("a").css({position: "absolute", right: "3em", top: "6em"}) // etc.

Answer 4

jQuery makes things shorter via a magic function $() that gives back a wrapper of your dom element.

The wrapper gives you access to all the css property, and pretty much all its methods (ie the setters are giving back "this") including the CSS setters.

It will be clearer with an example...

$("<a href='toto/'></a>")
    .css("position", "absolute");
    .css("right", "3em")
    .appendTo($(containerid));

Answer 5

Javascript has a with statement...

with a.style {
  position = 'absolute';
  right = '3em';
}

And you can split your repeated functionality out as a function and pass in your element as a parameter...

function setStyle(elem) {
  with elem.style {
    position = 'absolute';
    right = '3em';
  }

  return elem
}

//Invoke like this: elem = setStyle(elem)

Answer 6

Elaborating on the most highly voted answer above. Just put all of your css information into a css class. Then just assigned the class attribute.

<style type='text/css'>
 a .prt { 
 position:absolute; 
 right:3em; 
 top: 6em; 
 font-family: Arial,Helvetica,sans-serif; 
 font-weight:bold; 
 font-size:125%;
 background: #777777 none repeat scroll 0 0;
 color: white; padding: 6px 12px;
}
</style>
<script>
function createButton() {    
 var a = document.createElement('a');
 a.class= 'prt';   
 document.body.insertBefore(a, document.body.lastChild);
}
</script>