javascript - 使用 JavaScript 自定义样式化具有给定数据的按钮？

Question

我正在尝试使用 JavaScript 制作一个自定义按钮，但我不太了解它，以及如何为每个按钮提供该数据，我不确定要使用什么属性。好吧，我有Button 1并且我有这个脚本（不确定它是否正确）：

function customizeButton(fontColor, backgroundColor) {
    string.fontcolor(fontColor);
    button.style.backgroundColor="backgroundColor";
}

我将如何将这些信息与按钮挂钩以便显示，还是只需要使用 CSS？

Answer 1

处理这个问题最流行的方法是扩展 jQuery。

$.fn.yourCustomButton = function(caption,fontColor, backGround) {
   ...
   (perform your style using .css() etc 
   or better just add a class .addClass("coolButton") and use the style defined 
   in .css  file)
   ... 
   retun this;
};

使用它时，您需要做的就是提供一个 div：

<div id="button1"></div> 

然后将此 div 绑定到您的函数：

$("#button1").yourCustomButton("Test Button","#ffffff","#000000");

Answer 2

你必须使用element.style.propertyName. 如果要将其应用于多个按钮，请使函数将按钮作为参数：

function customizeButton(button, fontColor, backgroundColor) {
    button.style.color = fontColor;
    button.style.backgroundColor = backgroundColor;
}

var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');

customizeButton(button1, 'green', 'red');
customizeButton(button2, 'red', 'green');

http://jsfiddle.net/FPs5m/1