Style Attribute

Version

Application Scenario

Style attribute style is used in JS APIs with style parameters, following the CSS specifications, to set styles such as border, color, and text.

For example, you can use style to set the tooltip style by showTool(opts) and the cell style by setStyle(opts).

The following table shows the attributes which can be set by style.

Classification	Field	Style Instruction	Mobile Support
Text Style	fontWeight	Font weight	No
	fontStyle	Font style	No
	fontFamily	Font	No
	fontSize	Font size	Yes
	color	Font color	Yes
	lineHeight	Text height	No
Border Style	border	Top, bottom, left and right borders	Yes
	borderTop	Top border	Yes
	borderBottom	Bottom border	Yes
	borderLeft	Left border	Yes
	borderRight	Right border	Yes
Alignment Method Note:  The alignment setting is not supported in general reports.	padding	Padding	Yes
	paddingTop	Top padding	Yes
	paddingBottom	Bottom padding	Yes
	paddingLeft	Left indent	Yes
	paddingRight	Right indent	Yes
	lineHeight	No Line height/line spacing of text	Yes
	verticalAlign	Vertical alignment of elements in cells	Yes
	textAlign	Horizontal alignment of text	Yes

1. You can use setStyle(opts) to set the text in cell A1 of the report block report0 in the dashboard, including setting the font color to red, bolding the text, and setting the font size to 14.

_g().getWidgetByName('report0').getCell(1,1).setStyle({

 fontSize: "xx-large",

 color: 'red'

});

When setStyle(opts) is used in the template, you can click the button to modify the cell style, as shown in the following figure.

For details, you can download the template Modifying Cell Style after Obtaining the Cell.frm 

2. You can use showToolTip(opts) to set a tooltip for the report block report0 in the dashboard, including bolding the text, and setting the font size to 14 and the font to SimSun.

_g().getWidgetByName('report0').showToolTip({

 show: true, // Whether to show the pop-up box

 style: { // To select the field supported by CSS specifications

  fontWeight:'900',

  fontStyle:'italic',

  fontFamily: 'SimSun',

  fontSize: 'x-large'

  // Follow the CSS specifications

 }

});

When showToolTip(opts) is used in the template, you can set a tooltip for the table, as shown in the following figure.

For details, you can download the template Picture Tooltip in Cells with Hovering Cursor.frm