Как организовать Javascript verboseness?

Question

Я кодирую GM-скрипт, и одна вещь, которую я понял, что я делаю неоднократно, делает один и тот же код снова и снова. В частности, свойство стиля.

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

Как вы можете видеть в моем примере кода, я неоднократно писал a.style много раз. У вас есть методы, которые вы используете, чтобы избежать этого беспорядка? Только ради изящества.

БЛАГОДАРНОСТЬ -

Ребята, вот сокращенный код:

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, что, безусловно, выглядит лучше

Answer 1

Поместите атрибуты стиля в классы CSS, то просто динамически менять классы вместо сделать каждый атрибут стиля явно.

Answer 2

не-очень-хорошо-но-возможно, лучше, чем самый оригинальный ответ:

s = a.style; 

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

Answer 3

Попробуйте

Если вы используете JQuery вы могли бы написать:

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

Answer 4

jQuery делает вещи короче через магическую функцию $(), которая возвращает оболочку вашего элемента dom.

Обертка дает вам доступ ко всем свойствам css и почти всем его методам (т.е. сеттеры возвращают «это»), включая настройки CSS.

Это будет понятнее с примером ...

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

Answer 5

Javascript имеет with заявления ...

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

И вы можете разделить вашу повторную функциональность, как функция и передать ваш элемент как параметр ...

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

    return elem 
} 

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

Answer 6

Разработка наиболее проголосовавших ответьте выше. Просто поместите всю вашу информацию css в класс css. Затем просто присваивается атрибут class.

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