JS修改按钮样式
1. 描述
很多客户对于按钮样式的修改有比较大的需求，除了修改CSS样式，此处另提供JS修改其样式。
下面列举几种简单的样式修改效果：
原按钮样式
修改按钮名称颜色
修改按钮名称居左显示
修改按钮名称字体大小
修改按钮背景色+圆角边框
修改按钮名称字体为斜体
修改按钮长高
2. 示例
在工作簿中插入按钮，报表样式如下，共插入7个按钮控件：
第7个按钮的控件名为button：
注：按钮在页面中的排布顺序为从上到下，从左到右
2.1 按钮名称字体
（1）给第1个按钮添加点击事件，使得第7个按钮名称颜色变为红色：
$('.fr-btn-text').eq(6).css('color','red');
修改指定按钮用的是jQuery的eq(index)选择器
注： index的值是从0开始的，所以eq(6)获取到的是页面中第7个按钮
效果如下：
（2）给第3个按钮添加点击事件，使得第7个按钮名称字体变为20px：
$('.fr-btn-text').eq(6).css('font-size','20px');
$('.fr-btn-text').eq(6).css('height','25');//按钮文本高度默认为16px，如果字体大小超过文本高度会显示不全，需要调整按钮文本高度
效果如下：
（3）给第5个按钮添加点击事件，使得第7个按钮名称字体倾斜：
$('.fr-btn-text').eq(6).css('font-style','italic');
2.2 按钮名称位置
给第2个按钮添加点击事件，使得第7个按钮名称居左显示：
//$('.fr-btn-up').eq(6).css('text-align','left'); //居中用center
$('#fr-btn-BUTTON').css('text-align','left');
//$("div[widgetname='BUTTON']").css('text-align','left');//获取widgetname为BUTTON的div
2.3 按钮背景
给第4个按钮添加点击事件，使得第7个按钮背景变为绿色圆角：
$('.fr-btn-up').eq(6).css('background','#8AC007');//按钮背景色
$('.fr-btn-up').eq(6).css('border-radius','20px');//圆角边框
2.4 按钮大小
给第6个按钮添加点击事件，使得第7个按钮背景变小：
$('.fr-btn-up').eq(6).css('height','20');
$('.fr-btn-up').eq(6).css('width','50');
效果如下：
附件列表
主题： 二次开发
标签：
已验证