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

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

• javascript
• greasemonkey

• Is your "reduced code" supposed to be a joke or something? – Tim Frey Commented Apr 3, 2009 at 14:31
• rymn, you may also define the style attributes in a seperate .css file, then link the file in your page using a link tag. Another alternative is to define the style attributes in a style tag. This would avoid the need to define style attributes in JavaScript code. – AndreiM Commented Apr 3, 2009 at 14:42
• HTML4.01 doesn't allow style elements in the body, so browsers are free to ignore them; Chrome did this in the past, I don't know about current versions - see stackoverflow./questions/524696 – Christoph Commented Apr 3, 2009 at 15:14
• 1 jQuery works in Grease Monkey, and greatly reduces tedium. – Daniel X Moore Commented Apr 22, 2009 at 20:24

6 Answers 6

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

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

s = a.style;

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

Try

If you were using jQuery you could write:

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

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));

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)

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>