JS Custom Button Style

In applications, it is often necessary to modify the style of a button. In addition to modifying the CSS style, you can realize custom button style by JavaScript codes.

This article uses several examples to show how to change the button style through JavaScript , as shown in the following figure:

2.1 Report design

Add button widgets to cells A1~A7, the name of the button in A7 is BUTTON, as shown in the figure below:

2.2 Add event

Add Click events to A1~A6 respectively.

The JS code in the event is as follows:

1) Cell A1

$('.fr-btn-text').eq(6).css('color','red');//Make the color of button name in A7 turn red

2) Cell A2

$('#fr-btn-BUTTON').css('text-align','left');//Make the button name in A7 be displayed on the left

 3) Cell A3

$('.fr-btn-text').eq(6).css('font-size','20px'); 
$('.fr-btn-text').eq(6).css(' height','25');
//Make the font of button name in A7 become 20px, and the text height defaults to 16px. If the text size exceeds the text height, the display will be incomplete. You need to adjust the text height of the button

 4) Cell A4

$('.fr-btn-up').eq(6).css('border-radius','20px');//rounded border

 5) Cell A5

$('.fr-btn-text').eq(6).css('font-style','italic');//Make the font of button name in A7 italic

 6) Cell A6

$('.fr-btn-up').eq(6).css('height','20'); $('.fr-btn-up').eq(6).css('width' ,'50');//Make the background of the button in A7 shrink

2.3 Effect

Save the report, click Data Entry Preview, and the effect is as shown in the figure below:

Note: Mobile terminal is not supported.

Modify Button Style.cp