1

私は GM スクリプトをコーディングしていますが、繰り返し行っていることの 1 つは、同じコードを何度も繰り返していることに気付きました。具体的には、スタイル プロパティです。

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

笑 確かにそっちの方が良さそう

4

6 に答える 6

12

スタイル属性を CSS クラスに入れ、各スタイル属性を明示的に行う代わりにクラスを動的に交換します。

于 2009-04-03T14:11:51.760 に答える
1

あまり良くないが、おそらく元よりも優れている答え：

s = a.style;

s.position = "absolute";
...etc...
s.color = "white";
于 2009-04-03T14:12:06.457 に答える
1

試す

jQuery を使用している場合は、次のように記述できます。

$("a").css({position: "absolute", right: "3em", top: "6em"}) // etc.
于 2009-04-03T14:13:12.053 に答える
1

jQuery は、dom 要素のラッパーを返す魔法の関数 $() を介して物事を短くします。

ラッパーを使用すると、すべての css プロパティと、CSS セッターを含むほとんどすべてのメソッド (つまり、セッターが "this" を返す) にアクセスできます。

例を挙げれば分かりやすいでしょう...

$("<a href='toto/'></a>")
    .css("position", "absolute");
    .css("right", "3em")
    .appendTo($(containerid));
于 2009-04-03T14:18:47.673 に答える