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

Using JavaScript to customly stylize buttons with given data?

本文关键字：数据 按钮 样式 JavaScript 自定义 使用      更新时间：2023-09-26

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

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

我将如何将该信息与按钮挂钩以使其显示，或者我将不得不只使用CSS？

处理这个问题最流行的方法是扩展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");

您必须使用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

相关文章：