如何组织Javascript的详细性？

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

---

哈哈，这看起来确实更好

将样式属性放入CSS类，然后动态交换类，而不是显式地执行每个样式属性。

将样式属性放入CSS类，然后动态交换类，而不是显式地执行每个样式属性。

结果不是很好，但可能比原始答案更好：

s = a.style;

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

---

答案不是很好，但可能比原始答案更好：

s = a.style;

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

试一试

如果使用jQuery，您可以编写：

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

试一试

如果使用jQuery，您可以编写：

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

---

jQuery通过一个神奇的函数$（）使事情变得更短，该函数返回dom元素的包装器

包装器允许您访问所有css属性，以及几乎所有的方法 （即设定者正在回馈“这个”），包括CSS设定者

举个例子会更清楚

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

$（“”）
.css（“位置”、“绝对”）；
.css（“右”、“3em”）
.附件（$（集装箱））；

jQuery通过一个神奇的函数$（）使事情变得更短，该函数返回dom元素的包装器

包装器允许您访问所有css属性，以及几乎所有的方法 （即设定者正在回馈“这个”），包括CSS设定者

举个例子会更清楚

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

$（“”）
.css（“位置”、“绝对”）；
.css（“右”、“3em”）
.附件（$（集装箱））；

Javascript有一条语句

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)

Javascript有一个语句

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)

---

详细说明以上投票率最高的答案。 只需将所有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>

a.prt{
位置：绝对位置；
右：3em；
顶部：6em；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
字体大小：125%；
背景：#777777无重复滚动0；
颜色：白色；填充：6px 12px；
}
函数createButton（）{
var a=document.createElement（'a'）；
a、 类别='prt'；
document.body.insertBefore（a，document.body.lastChild）；
}

详细说明上述投票率最高的答案。 只需将所有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>

a.prt{
位置：绝对位置；
右：3em；
顶部：6em；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
字体大小：125%；
背景：#777777无重复滚动0；
颜色：白色；填充：6px 12px；
}
函数createButton（）{
var a=document.createElement（'a'）；
a、 类别='prt'；
document.body.insertBefore（a，document.body.lastChild）；
}

AFAIK，一些浏览器将s视为参考，而其他浏览器将s视为副本，因此您可能会在此处遇到跨浏览器问题。但我可能完全错了。如果你要走这条路，那么使用（a.style）会更好，除非你相信crockford的liesWhich浏览器会为JavaScript做一个赋值拷贝？Crockford对这个案子怎么说？完全忽略我最后的评论。应该有人针对堆栈溢出执行以下操作之一：。好的，有些浏览器将s视为引用，而其他浏览器将s视为副本，因此您可能会在此处遇到跨浏览器问题。但我可能完全错了。如果你要走这条路，那么使用（a.style）会更好，除非你相信crockford的liesWhich浏览器会为JavaScript做一个赋值拷贝？Crockford对这个案子怎么说？完全忽略我最后的评论。应该有人为堆栈溢出执行以下操作之一：。是的，jQuery很棒。我现在正在尝试裸机Javascript。我有点想知道Javascript的细节。是的，jQuery很棒。我现在正在尝试裸机Javascript。我有点想知道Javascript的细节。你的“简化代码”应该是一个笑话还是什么？rymn，你也可以在一个单独的.css文件中定义样式属性，然后使用链接标签在页面中链接该文件。另一种方法是在样式标记中定义样式属性。这将避免在JavaScript代码中定义样式属性的需要。HTML4.01不允许在正文中包含样式元素，因此浏览器可以随意忽略它们；Chrome在过去做过这件事，我不知道当前的版本-请看jQuery在油脂猴中工作，并大大减少了繁琐。你的“简化代码”应该是一个笑话还是什么？rymn，你也可以在单独的.css文件中定义样式属性，然后使用链接标记在页面中链接该文件。另一种方法是在样式标记中定义样式属性。这将避免在JavaScript代码中定义样式属性的需要。HTML4.01不允许在正文中包含样式元素，因此浏览器可以随意忽略它们；Chrome在过去做过这件事，我不知道当前的版本如何-请看jQuery在GreateMonkey中工作，并大大减少了繁琐的工作。谢谢，我正在GreateMonkey中编码，我想了解更多关于裸机Javascript的知识=汉克斯，我正在用Greasemonkey编写代码，想了解更多关于裸机Javascript的知识=数据应为'a.className='prt'；`-

class

是一个保留字，当用作不带引号的属性名时，可能会导致问题，该属性名应为`a.className='prt'；`-

class

是保留字，当用作不带引号的属性名称时可能会导致问题