# GC.Spread.Sheets.Style

## Content

# Class: Style

[Spread](../modules/GC.Spread).[Sheets](../modules/GC.Spread.Sheets).Style

## Table of contents

### Constructors

- [constructor](GC.Spread.Sheets.Style#constructor)

### Properties

- [applyAlignment](GC.Spread.Sheets.Style#applyalignment)
- [applyBorder](GC.Spread.Sheets.Style#applyborder)
- [applyFill](GC.Spread.Sheets.Style#applyfill)
- [applyFont](GC.Spread.Sheets.Style#applyfont)
- [applyNumberFormat](GC.Spread.Sheets.Style#applynumberformat)
- [applyProtection](GC.Spread.Sheets.Style#applyprotection)
- [backColor](GC.Spread.Sheets.Style#backcolor)
- [backgroundImage](GC.Spread.Sheets.Style#backgroundimage)
- [backgroundImageLayout](GC.Spread.Sheets.Style#backgroundimagelayout)
- [borderBottom](GC.Spread.Sheets.Style#borderbottom)
- [borderLeft](GC.Spread.Sheets.Style#borderleft)
- [borderRight](GC.Spread.Sheets.Style#borderright)
- [borderTop](GC.Spread.Sheets.Style#bordertop)
- [cellButtons](GC.Spread.Sheets.Style#cellbuttons)
- [cellPadding](GC.Spread.Sheets.Style#cellpadding)
- [cellType](GC.Spread.Sheets.Style#celltype)
- [decoration](GC.Spread.Sheets.Style#decoration)
- [diagonalDown](GC.Spread.Sheets.Style#diagonaldown)
- [diagonalUp](GC.Spread.Sheets.Style#diagonalup)
- [dropDowns](GC.Spread.Sheets.Style#dropdowns)
- [font](GC.Spread.Sheets.Style#font)
- [foreColor](GC.Spread.Sheets.Style#forecolor)
- [formatter](GC.Spread.Sheets.Style#formatter)
- [hAlign](GC.Spread.Sheets.Style#halign)
- [imeMode](GC.Spread.Sheets.Style#imemode)
- [isVerticalText](GC.Spread.Sheets.Style#isverticaltext)
- [labelOptions](GC.Spread.Sheets.Style#labeloptions)
- [locked](GC.Spread.Sheets.Style#locked)
- [mask](GC.Spread.Sheets.Style#mask)
- [name](GC.Spread.Sheets.Style#name)
- [parentName](GC.Spread.Sheets.Style#parentname)
- [showEllipsis](GC.Spread.Sheets.Style#showellipsis)
- [shrinkToFit](GC.Spread.Sheets.Style#shrinktofit)
- [tabStop](GC.Spread.Sheets.Style#tabstop)
- [textDecoration](GC.Spread.Sheets.Style#textdecoration)
- [textIndent](GC.Spread.Sheets.Style#textindent)
- [textOrientation](GC.Spread.Sheets.Style#textorientation)
- [themeFont](GC.Spread.Sheets.Style#themefont)
- [vAlign](GC.Spread.Sheets.Style#valign)
- [watermark](GC.Spread.Sheets.Style#watermark)
- [wordWrap](GC.Spread.Sheets.Style#wordwrap)

### Methods

- [clone](GC.Spread.Sheets.Style#clone)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new Style**(`backColor?`, `foreColor?`, `hAlign?`, `vAlign?`, `font?`, `themeFont?`, `formatter?`, `borderLeft?`, `borderTop?`, `borderRight?`, `borderBottom?`, `locked?`, `textIndent?`, `wordWrap?`, `shrinkToFit?`, `backgroundImage?`, `cellType?`, `backgroundImageLayout?`, `tabStop?`, `textDecoration?`, `imeMode?`, `name?`, `parentName?`, `watermark?`, `cellPadding?`, `labelOptions?`, `diagonalDown?`, `diagonalUp?`, `isVerticalText?`, `textOrientation?`, `mask?`, `applyFont?`, `applyFill?`, `applyAlignment?`, `applyBorder?`, `applyProtection?`, `applyNumberFormat?`)

Represents the style for a cell, row, and column.

**`example`**
```
//This example uses a style with rules.
activeSheet.setArray(0,0,[1,2,3,4,5,6,7,8,9,10]);
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.foreColor = "black";
var cell = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
cell.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.cellValueRule);
cell.operator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan);
cell.value1(5);
cell.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
cell.style(style);
activeSheet.conditionalFormats.addRule(cell);
var style1 = new GC.Spread.Sheets.Style();
style1.foreColor = "red";
var top = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
top.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.top10Rule);
top.type(GC.Spread.Sheets.ConditionalFormatting.Top10ConditionType.top);
top.rank(3);
top.style(style1);
top.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
top.stopIfTrue(true);
activeSheet.conditionalFormats.addRule(top);
```

**`example`**
```
//This example creates and sets parameters for the style.
sheet.setValue(0,0, 1,3);
sheet.setValue(1,0, 50,3);
sheet.setValue(2,0, 100,3);
sheet.setValue(3,0, 2,3);
sheet.setValue(4,0, 60,3);
sheet.setValue(5,0, 90,3);
sheet.setValue(6,0, 3,3);
sheet.setValue(7,0, 40,3);
sheet.setValue(8,0, 70,3);
sheet.setValue(9,0, 5,3);
sheet.setValue(10,0, 35,3);
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft =new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom =  new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
sheet.conditionalFormats.addAverageRule(GC.Spread.Sheets.ConditionalFormatting.AverageConditionType.above, style, [new GC.Spread.Sheets.Range(0, 0, 10, 3)]);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `backColor?` | `string` \| [`IGradientFill`](../interfaces/GC.Spread.Sheets.IGradientFill) \| [`IGradientPathFill`](../interfaces/GC.Spread.Sheets.IGradientPathFill) \| [`IPatternFill`](../interfaces/GC.Spread.Sheets.IPatternFill) | The background color. |
| `foreColor?` | `string` | The foreground color. |
| `hAlign?` | [`HorizontalAlign`](../enums/GC.Spread.Sheets.HorizontalAlign) | The horizontal alignment. |
| `vAlign?` | [`VerticalAlign`](../enums/GC.Spread.Sheets.VerticalAlign) | The vertical alignment. |
| `font?` | `string` | The font. |
| `themeFont?` | `string` | The font theme. |
| `formatter?` | `string` \| [`GeneralFormatter`](GC.Spread.Formatter.GeneralFormatter) | The formatting object. |
| `borderLeft?` | [`LineBorder`](GC.Spread.Sheets.LineBorder) | The left border. |
| `borderTop?` | [`LineBorder`](GC.Spread.Sheets.LineBorder) | The top border. |
| `borderRight?` | [`LineBorder`](GC.Spread.Sheets.LineBorder) | The right border. |
| `borderBottom?` | [`LineBorder`](GC.Spread.Sheets.LineBorder) | The bottom border. |
| `locked?` | `boolean` | Whether the cell, row, or column is locked. |
| `textIndent?` | `number` | The text indent amount. |
| `wordWrap?` | `boolean` | Whether words wrap within the cell or cells. |
| `shrinkToFit?` | `boolean` | Whether content shrinks to fit the cell or cells. |
| `backgroundImage?` | `string` | The background image to display. |
| `cellType?` | [`Base`](GC.Spread.Sheets.CellTypes.Base) | The cell type. |
| `backgroundImageLayout?` | [`ImageLayout`](../enums/GC.Spread.Sheets.ImageLayout) | The layout for the background image. |
| `tabStop?` | `boolean` | Whether the user can set focus to the cell using the Tab key. |
| `textDecoration?` | [`TextDecorationType`](../enums/GC.Spread.Sheets.TextDecorationType) | Specifies the decoration added to text. |
| `imeMode?` | [`ImeMode`](../enums/GC.Spread.Sheets.ImeMode) | Specifies the input method editor mode. |
| `name?` | `string` | Specifies the name. |
| `parentName?` | `string` | Specifies the name of the parent style. |
| `watermark?` | `string` | Specifies the watermark content. |
| `cellPadding?` | `string` | Specifies the cell padding. |
| `labelOptions?` | [`ILabelOptions`](../interfaces/GC.Spread.Sheets.ILabelOptions) | Specifies the cell label options. |
| `diagonalDown?` | [`LineBorder`](GC.Spread.Sheets.LineBorder) | The diagonal with LeftTop to bottomRight. |
| `diagonalUp?` | [`LineBorder`](GC.Spread.Sheets.LineBorder) | The diagonal with topRight to bottomLeft. |
| `isVerticalText?` | `boolean` | Whether to set the cell's text vertical. |
| `textOrientation?` | `number` | the cell text rotation angle. |
| `mask?` | [`IMaskType`](../interfaces/GC.Spread.Sheets.IMaskType) | The mask object for input mask. |
| `applyFont?` | `boolean` | - |
| `applyFill?` | `boolean` | - |
| `applyAlignment?` | `boolean` | - |
| `applyBorder?` | `boolean` | - |
| `applyProtection?` | `boolean` | - |
| `applyNumberFormat?` | `boolean` | - |

## Properties

### <a id="applyalignment" name="applyalignment"></a> applyAlignment

• **applyAlignment**: `boolean`

Only work for namedStyle, the boolean value indicates whether the alignment formatting applied.

**`example`**
```
//This example sets the applyAlignment property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyAlignment = false;
spread.addNamedStyle(style);
```

___

### <a id="applyborder" name="applyborder"></a> applyBorder

• **applyBorder**: `boolean`

Only work for namedStyle, the boolean value indicates whether the border formatting applied.

**`example`**
```
//This example sets the applyBorder property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyBorder = false;
spread.addNamedStyle(style);
```

___

### <a id="applyfill" name="applyfill"></a> applyFill

• **applyFill**: `boolean`

Only work for namedStyle, the boolean value indicates whether the fill formatting applied.

**`example`**
```
//This example sets the applyFill property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyFill = false;
spread.addNamedStyle(style);
```

___

### <a id="applyfont" name="applyfont"></a> applyFont

• **applyFont**: `boolean`

Only work for namedStyle, the boolean value indicates whether the font formatting applied.

**`example`**
```
//This example sets the applyFont property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyFont = false;
spread.addNamedStyle(style);
```

___

### <a id="applynumberformat" name="applynumberformat"></a> applyNumberFormat

• **applyNumberFormat**: `boolean`

Only work for namedStyle, the boolean value indicates whether the number formatting applied.

**`example`**
```
//This example sets the applyNumberFormat property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyNumberFormat = false;
spread.addNamedStyle(style);
```

___

### <a id="applyprotection" name="applyprotection"></a> applyProtection

• **applyProtection**: `boolean`

Only work for namedStyle, the boolean value indicates whether the protection formatting applied.

**`example`**
```
//This example sets the applyProtection property for namedStyle.
var style = new GC.Spread.Sheets.Style();
style.name = 'test';
style.applyProtection = false;
spread.addNamedStyle(style);
```

___

### <a id="backcolor" name="backcolor"></a> backColor

• **backColor**: `undefined` \| `string` \| [`IGradientFill`](../interfaces/GC.Spread.Sheets.IGradientFill) \| [`IGradientPathFill`](../interfaces/GC.Spread.Sheets.IGradientPathFill) \| [`IPatternFill`](../interfaces/GC.Spread.Sheets.IPatternFill)

Indicates the background color.

**`example`**
```
//This example sets the style backColor property.
activeSheet.setArray(0,0,[1,2,3,4,5,6,7,8,9,10]);
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.foreColor = "black";
var cell = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
cell.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.cellValueRule);
cell.operator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan);
cell.value1(5);
cell.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
cell.style(style);
activeSheet.conditionalFormats.addRule(cell);
var style1 = new GC.Spread.Sheets.Style();
style1.foreColor = "red";
var top = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
top.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.top10Rule);
top.type(GC.Spread.Sheets.ConditionalFormatting.Top10ConditionType.top);
top.rank(3);
top.style(style1);
top.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
top.stopIfTrue(true);
activeSheet.conditionalFormats.addRule(top);
```

___

### <a id="backgroundimage" name="backgroundimage"></a> backgroundImage

• **backgroundImage**: `undefined` \| `string`

Indicates the background image.

**`example`**
```
//This example sets the backgroundImage property.
var style = new GC.Spread.Sheets.Style();
style.backColor = "lightgreen";
style.backgroundImage = "./css/images/quarter1.png";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="backgroundimagelayout" name="backgroundimagelayout"></a> backgroundImageLayout

• **backgroundImageLayout**: `undefined` \| [`ImageLayout`](../enums/GC.Spread.Sheets.ImageLayout)

Indicates the background image layout.

**`example`**
```
//This example sets the backgroundImageLayout property.
var style = new GC.Spread.Sheets.Style();
style.backColor = "lightgreen";
style.backgroundImage = "./css/images/quarter1.png";
style.backgroundImageLayout  = GC.Spread.Sheets.ImageLayout.center;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="borderbottom" name="borderbottom"></a> borderBottom

• **borderBottom**: `undefined` \| [`LineBorder`](GC.Spread.Sheets.LineBorder)

Indicates the bottom border line.

**`example`**
```
//This example creates a border.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft =new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="borderleft" name="borderleft"></a> borderLeft

• **borderLeft**: `undefined` \| [`LineBorder`](GC.Spread.Sheets.LineBorder)

Indicates the left border line.

**`example`**
```
//This example creates a border.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft =new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="borderright" name="borderright"></a> borderRight

• **borderRight**: `undefined` \| [`LineBorder`](GC.Spread.Sheets.LineBorder)

Indicates the right border line.

**`example`**
```
//This example creates a border.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft =new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="bordertop" name="bordertop"></a> borderTop

• **borderTop**: `undefined` \| [`LineBorder`](GC.Spread.Sheets.LineBorder)

Indicates the top border line.

**`example`**
```
//This example creates a border.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft =new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="cellbuttons" name="cellbuttons"></a> cellButtons

• **cellButtons**: `undefined` \| [`ICellButton`](../interfaces/GC.Spread.Sheets.ICellButton)[]

Indicates the cellButtons of cell.

**`property`** {string} [caption] - Specific the text of the button to display

**`property`** {GC.Spread.Sheets.CaptionAlignment} [captionAlign] - Specific the position of image and caption.

**`property`** {GC.Spread.Sheets.ButtonPosition} [position] - Specific the button's position in cell

**`property`** {boolean} [enabled] - Specific whether the cell button responds to user actions, default value is true.

**`property`** {boolean} [useButtonStyle] - Specific whether the cellButton is a button style, default value is false.

**`property`** {number} [width] - Specific the button's width. If it is set to null or undefined, the button width is auto fit based on the caption and image size.

**`property`** {GC.Spread.Sheets.ButtonVisibility} [visibility] - Specific the button can be visible always, onSelected, onEditing, default value is always.

**`property`** {string | function} [command] - When click button, allow user to execute a spread command or user can execute a callback.

**`property`** {GC.Spread.Sheets.ButtonImageType} [imageType] - Specific the button's type (the type of image to display in the button). Provide some predefined type for cellButton, custom allow to specific icon.

**`property`** {string} [imageSrc] - When imageType is custom, can specific a image (base64) by imageSrc.

**`property`** {Object} [imageSize] - Specific the image's size, default value is 16px.

**`property`** {number} [imageSize.width] - Specific the image's width, default value is 16, unit is px.

**`property`** {number} [imageSize.height] - Specific the image's height, default value is 16, unit is px.

**`property`** {string} [hoverBackColor] - Specific the hover backColor of cell button when the button is visible and enable.

**`property`** {string} [buttonBackColor] - Specific the backColor of cell button when the button is enable.

**`example`**
```
buttonConfig1 = {
    caption: "left",
    enabled: true,
    buttonBackColor: "#174EA6",
    visibility:GC.Spread.Sheets.ButtonVisibility.always,
};
buttonConfig2 = {
    caption: "left",
    enabled: true,
    hoverBackColor: "#3390FF",
    visibility:GC.Spread.Sheets.ButtonVisibility.onSelected,
};
buttonConfig3 = {
    caption: "Cut",
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    useButtonStyle: true,
    imageSrc:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvb...", //This is not a complete base64 string
};
//create style
var style = new GC.Spread.Sheets.Style();
style.cellButtons=[
     buttonConfig1,
     buttonConfig2,
     buttonConfig3
];
sheet.setStyle(0, 0, style);
```

___

### <a id="cellpadding" name="cellpadding"></a> cellPadding

• **cellPadding**: `undefined` \| `string`

Indicates the cell padding.

**`example`**
```
//This example sets the cell padding for the watermark.
var type = new GC.Spread.Sheets.Style();
type.watermark = "User name";
type.cellPadding = "20";
type.labelOptions = {alignment:GC.Spread.Sheets.LabelAlignment.topLeft, visibility: GC.Spread.Sheets.LabelVisibility.visible};
activeSheet.setStyle(0, 1, type);
activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);
activeSheet.getRange(-1, 1, -1, 1).width(150);
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]);
combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
activeSheet.setCellType(2, 1, combo, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).watermark("ComboBox Cell Type").cellPadding('10 10 20 10');
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).labelOptions({alignment: GC.Spread.Sheets.LabelAlignment.bottomCenter, foreColor: 'yellowgreen', font: 'bold 15px Arial'});
activeSheet.getRange(2, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);
```

___

### <a id="celltype" name="celltype"></a> cellType

• **cellType**: `undefined` \| [`Base`](GC.Spread.Sheets.CellTypes.Base)

Indicates the cell type.

**`example`**
```
//This example creates a style and applies it to a cell.
var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft =new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.cellType = cellType
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="decoration" name="decoration"></a> decoration

• **decoration**: [`IDecoration`](../interfaces/GC.Spread.Sheets.IDecoration)

Define a decorator for cell to better represent cell.

**`example`**
```
//This example sets the decoration property for Style.
var style = new GC.Spread.Sheets.Style();
style.decoration = {
    cornerFold: {
       size: 6,
       position: GC.Spread.Sheets.CornerPosition.leftTop,
       color: "red"
    },
    icons: [
         {
             src: './icon.png',
             width: 12,
             height: 12,
             position: GC.Spread.Sheets.IconPosition.left,
         }
    ]
}
```

___

### <a id="diagonaldown" name="diagonaldown"></a> diagonalDown

• **diagonalDown**: `undefined` \| [`LineBorder`](GC.Spread.Sheets.LineBorder)

Indicates the diagonalDown border line.

**`example`**
```
activeSheet.getRange(-1, 3, -1, 1, GC.Spread.Sheets.SheetArea.viewport).diagonalDown(new GC.Spread.Sheets.LineBorder("blue", GC.Spread.Sheets.LineStyle.mediumDashed));
```

___

### <a id="diagonalup" name="diagonalup"></a> diagonalUp

• **diagonalUp**: `undefined` \| [`LineBorder`](GC.Spread.Sheets.LineBorder)

Indicates the diagonalUp border line.

**`example`**
```
activeSheet.getRange(-1, 3, -1, 1, GC.Spread.Sheets.SheetArea.viewport).diagonalUp(new GC.Spread.Sheets.LineBorder("blue", GC.Spread.Sheets.LineStyle.mediumDashed));
```

___

### <a id="dropdowns" name="dropdowns"></a> dropDowns

• **dropDowns**: `undefined` \| [`IDropdown`](../interfaces/GC.Spread.Sheets.IDropdown)[]

Indicates the dropdown type of cell.

**`example`**
```
leftButtonConfig1 = {
    caption: "left",
    enabled: true,
    isLeft: true,
    visibility:GC.Spread.Sheets.ButtonVisibility.always,
    command: "opendropdown"
}
//create style
var style = new GC.Spread.Sheets.Style();
style.cellButtons=[
     leftButtonConfig1
];
style.dropDowns= [{ type: "colorPicker" }];
sheet.setStyle(0, 0, style);
```

___

### <a id="font" name="font"></a> font

• **font**: `undefined` \| `string`

Indicates the font.

**`example`**
```
//This example sets the font property.
var style = new GC.Spread.Sheets.Style();
style.font = "8pt Arial";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");
```

___

### <a id="forecolor" name="forecolor"></a> foreColor

• **foreColor**: `undefined` \| `string`

Indicates the foreground color.

**`example`**
```
//This example sets the foreColor property.
activeSheet.setArray(0,0,[1,2,3,4,5,6,7,8,9,10]);
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.foreColor = "black";
var cell = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
cell.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.cellValueRule);
cell.operator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan);
cell.value1(5);
cell.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
cell.style(style);
activeSheet.conditionalFormats.addRule(cell);
var style1 = new GC.Spread.Sheets.Style();
style1.foreColor = "red";
var top = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
top.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.top10Rule);
top.type(GC.Spread.Sheets.ConditionalFormatting.Top10ConditionType.top);
top.rank(3);
top.style(style1);
top.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 1)]);
top.stopIfTrue(true);
activeSheet.conditionalFormats.addRule(top);
```

___

### <a id="formatter" name="formatter"></a> formatter

• **formatter**: `undefined` \| `string` \| [`GeneralFormatter`](GC.Spread.Formatter.GeneralFormatter)

Indicates the formatter.

**`example`**
```
//This example uses the formatter property.
var style = new GC.Spread.Sheets.Style();
style.formatter = "0.000%";
style.themeFont = "Body";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("11");
```

___

### <a id="halign" name="halign"></a> hAlign

• **hAlign**: `undefined` \| [`HorizontalAlign`](../enums/GC.Spread.Sheets.HorizontalAlign)

Indicates the horizontal alignment.

**`example`**
```
//This example sets the hAlign property.
var style = new GC.Spread.Sheets.Style();
style.font = "8pt Arial";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");
```

___

### <a id="imemode" name="imemode"></a> imeMode

• **imeMode**: `undefined` \| [`ImeMode`](../enums/GC.Spread.Sheets.ImeMode)

Indicates the Input Method Editor (IME) mode.

**`example`**
```
//This example sets the IME mode.
var style = new GC.Spread.Sheets.Style();
style.imeMode = GC.Spread.Sheets.ImeMode.auto;
activeSheet.setStyle(0, 0, style);
```

___

### <a id="isverticaltext" name="isverticaltext"></a> isVerticalText

• **isVerticalText**: `undefined` \| `boolean`

Indicates whether to set the text vertical.

**`example`**
```
//This example uses the rotate property.
var style = new GC.Spread.Sheets.Style();
style.isVerticalText = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="labeloptions" name="labeloptions"></a> labelOptions

• **labelOptions**: `undefined` \| [`ILabelOptions`](../interfaces/GC.Spread.Sheets.ILabelOptions)

Indicates the cell label options.

**`property`** {GC.Spread.Sheets.LabelAlignment} [alignment] - The cell label position.

**`property`** {GC.Spread.Sheets.LabelVisibility} [visibility] - The cell label visibility.

**`property`** {string} [font] - The cell label font.

**`property`** {string} [foreColor] - The cell label forecolor.

**`property`** {string} [margin] - The cell label margin.

**`example`**
```
//This example sets label options for the watermark.
var type = new GC.Spread.Sheets.Style();
type.watermark = "User name";
type.cellPadding = "20";
type.labelOptions = {alignment:GC.Spread.Sheets.LabelAlignment.topLeft, visibility: GC.Spread.Sheets.LabelVisibility.visible};
activeSheet.setStyle(0, 1, type);
activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);
activeSheet.getRange(-1, 1, -1, 1).width(150);
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]);
combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
activeSheet.setCellType(2, 1, combo, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).watermark("ComboBox Cell Type").cellPadding('10 10 20 10');
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).labelOptions({alignment: GC.Spread.Sheets.LabelAlignment.bottomCenter, foreColor: 'yellowgreen', font: 'bold 15px Arial'});
activeSheet.getRange(2, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);
```

___

### <a id="locked" name="locked"></a> locked

• **locked**: `undefined` \| `boolean`

Indicates whether a cell is marked as locked from editing.

**`example`**
```
//This example unlocks a single cell.
activeSheet.options.isProtected = true;
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft =new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.locked = false;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="mask" name="mask"></a> mask

• **mask**: `undefined` \| [`IMaskType`](../interfaces/GC.Spread.Sheets.IMaskType)

Indicates input mask.

**`example`**
```
// This example uses the mask property.
var style = new GC.Spread.Sheets.Style();
style.mask = {
    pattern: '000-00000',
    excludeLiteral: true,
    placeholder: '#'
};
activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="name" name="name"></a> name

• **name**: `undefined` \| `string`

Indicates the name.

**`example`**
```
//This example sets the style name.
var namedStyle = new GC.Spread.Sheets.Style();
namedStyle.name = "style1";
namedStyle.backColor = "green";
activeSheet.addNamedStyle(namedStyle);
activeSheet.setStyleName(1, 1, "style1"); // cell(1,1)'s backColor is green.
var namedStyle1 = new GC.Spread.Sheets.Style();
namedStyle1.name = "style2";
namedStyle1.parentName = "style1";
namedStyle1.foreColor = "red";    // the namedStyle's foreColor is red.
activeSheet.addNamedStyle(namedStyle1);
activeSheet.setStyleName(2, 1, "style2");
```

___

### <a id="parentname" name="parentname"></a> parentName

• **parentName**: `undefined` \| `string`

Indicates the name of the parent style.

**`example`**
```
//This example sets the parent name.
var namedStyle = new GC.Spread.Sheets.Style();
namedStyle.name = "style1";
namedStyle.backColor = "green";
activeSheet.addNamedStyle(namedStyle);
activeSheet.setStyleName(1, 1, "style1"); // cell(1,1)'s backColor is green.
var namedStyle1 = new GC.Spread.Sheets.Style();
namedStyle1.name = "style2";
namedStyle1.parentName = "style1";
namedStyle1.foreColor = "red";    // the namedStyle's foreColor is red.
activeSheet.addNamedStyle(namedStyle1);
activeSheet.setStyleName(2, 1, "style2");
```

___

### <a id="showellipsis" name="showellipsis"></a> showEllipsis

• **showEllipsis**: `undefined` \| `boolean`

Controls whether the Text out of bounds shows ellipsis.

**`example`**
```
//This example sets the showEllipsis property.
var style = new GC.Spread.Sheets.Style();
style.showEllipsis = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("TestTestTestTest");
```

___

### <a id="shrinktofit" name="shrinktofit"></a> shrinkToFit

• **shrinkToFit**: `undefined` \| `boolean`

Indicates whether to shrink to fit.

**`example`**
```
//This example sets the shrinkToFit property.
var style = new GC.Spread.Sheets.Style();
style.shrinkToFit = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("Shrink To Fit");
```

___

### <a id="tabstop" name="tabstop"></a> tabStop

• **tabStop**: `undefined` \| `boolean`

Indicates whether the user can set focus to the cell using the Tab key.

**`example`**
```
//This example sets the tabStop property.
var style = new GC.Spread.Sheets.Style();
style.tabStop = false;
style.backColor = "lightgreen";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
```

___

### <a id="textdecoration" name="textdecoration"></a> textDecoration

• **textDecoration**: `undefined` \| [`TextDecorationType`](../enums/GC.Spread.Sheets.TextDecorationType)

Indicates the decoration added to text.

**`example`**
```
//This example uses the textDecoration property.
activeSheet.getCell(0, 0).textDecoration(GC.Spread.Sheets.TextDecorationType.underline);
activeSheet.getRange(1, -1, 1, -1).textDecoration(GC.Spread.Sheets.TextDecorationType.overline | GC.Spread.Sheets.TextDecorationType.underline);
activeSheet.getRange(-1, 1, -1, 1).textDecoration(GC.Spread.Sheets.TextDecorationType.overline | GC.Spread.Sheets.TextDecorationType.lineThrough | GC.Spread.Sheets.TextDecorationType.underline);
var style = new GC.Spread.Sheets.Style();
style.textDecoration = GC.Spread.Sheets.TextDecorationType.overline | GC.Spread.Sheets.TextDecorationType.underline;
activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(0, 0).value("Test");
activeSheet.getCell(1, 0).value("Test");
activeSheet.getCell(0, 1).value("Test");
```

___

### <a id="textindent" name="textindent"></a> textIndent

• **textIndent**: `undefined` \| `number`

Indicates the number of units of indentation for text in a cell, an integer value, where an increment of 1 represents 8 pixels.

**`example`**
```
//This example sets the textIndent property.
var style = new GC.Spread.Sheets.Style();
style.textIndent = 3;
// Enter multiple lines with Alt+Enter
style.wordWrap = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("Test");
```

___

### <a id="textorientation" name="textorientation"></a> textOrientation

• **textOrientation**: `undefined` \| `number`

Indicates the text rotation angle of cell.

**`example`**
```
//This example sets the textOrientation property.
var style = new GC.Spread.Sheets.Style();
style.textOrientation = 66;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("TestTestTestTest");
```

___

### <a id="themefont" name="themefont"></a> themeFont

• **themeFont**: `undefined` \| `string`

Indicates the font theme.

**`example`**
```
//This example uses the themeFont property.
var style = new GC.Spread.Sheets.Style();
style.formatter = "0.000%";
style.themeFont = "Body";
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("11");
```

___

### <a id="valign" name="valign"></a> vAlign

• **vAlign**: `undefined` \| [`VerticalAlign`](../enums/GC.Spread.Sheets.VerticalAlign)

Indicates the vertical alignment.

**`example`**
```
//This example sets the vAlign property.
var style = new GC.Spread.Sheets.Style();
style.font = "8pt Arial";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).value("B2");
```

___

### <a id="watermark" name="watermark"></a> watermark

• **watermark**: `undefined` \| `string`

Indicates the watermark content.

**`example`**
```
//The following examples add watermarks to cells, columns, and rows.
var type = new GC.Spread.Sheets.Style();
type.watermark = "User name";
sheet.setStyle(0, 1, type);
var type = new GC.Spread.Sheets.Style();
type.watermark = "Password";
sheet.setStyle(1, 1, type);
```

**`example`**
```
var type = new GC.Spread.Sheets.Style();
type.watermark = "The watermark.";
activeSheet.setStyle(-1, 1, type);
activeSheet.setStyle(1, -1, type);
activeSheet.setStyle(2, 2, type);
```

___

### <a id="wordwrap" name="wordwrap"></a> wordWrap

• **wordWrap**: `undefined` \| `boolean`

Indicates whether to wrap text.

**`example`**
```
//This example sets the wordWrap property.
var style = new GC.Spread.Sheets.Style();
style.textIndent = 3;
// Enter multiple lines with Alt+Enter
style.wordWrap = true;
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1,1).text("Test");
```

## Methods

### <a id="clone" name="clone"></a> clone

▸ **clone**(): [`Style`](GC.Spread.Sheets.Style)

Clones the current style.

#### Returns

[`Style`](GC.Spread.Sheets.Style)

The cloned style.