1

我正在编写一个 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);
}

大声笑，那当然看起来更好

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 属性，以及几乎所有它的方法（即设置器返回“this”），包括 CSS 设置器。

举个例子会更清楚...

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

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)
于 2009-04-03T14:32:20.307 回答
0

详细说明上面投票率最高的答案。只需将所有 css 信息放入 css 类。然后只需分配类属性。

<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>
于 2009-04-03T14:45:30.853 回答