Wie organisieren Sie Javascript Verbose?

Question

Ich schreibe ein GM-Skript, und eine Sache, die ich realisierte, dass ich immer wieder mache, macht den gleichen Code immer und immer wieder. Insbesondere die Stileigenschaft.

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

Wie Sie in meinem Beispielcode sehen können, schrieb ich wiederholt a.style oft. Haben Sie Techniken, mit denen Sie dieses Chaos vermeiden? Nur aus Gründen der Anmut.

DANK -

Jungs, hier ist der reduzierte 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, die sicherlich besser

Answer 1

Setzen Sie die Stilattribute in CSS-Klassen aussieht, dann tauschen nur dynamisch die Klassen statt jedes Style-Attribut explizit auszuführen.

Answer 2

Die nicht sehr-gut-aber-vielleicht-besser-als-der-Original Antwort:

s = a.style; 

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

Answer 3

Versuchen

Wenn Sie jQuery wurden mit Ihnen schreiben konnte:

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

Answer 4

jQuery macht die Dinge kürzer durch eine magische Funktion $(), die einen Wrapper Ihres dom-Elements zurückgibt.

Der Wrapper gibt Ihnen Zugriff auf alle CSS-Eigenschaft, und so ziemlich alle Methoden (dh die Setter geben "this" zurück) einschließlich der CSS-Setter.

Es wird mit einem Beispiel klarer ...

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

Answer 5

Javascript hat eine with Aussage ...

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

Und Sie können Ihre wiederholte Funktionalität aus als Funktion aufgeteilt und übergeben Ihr Element als Parameter ...

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

    return elem 
} 

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

Answer 6

Ausarbeitung auf der am meisten abgestimmt antworte oben. Legen Sie einfach alle Ihre CSS-Informationen in eine CSS-Klasse. Habe dann gerade das Klassenattribut zugewiesen.

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