js表單樣式（js中表單）

本文目錄一覽：

• 1、如何設置SpreadJS表單的單元格
• 2、如何設置SpreadJS的表格樣式
• 3、如何用js給html表單設置style

如何設置SpreadJS表單的單元格

setValue可以設置單元格的值

setStyle可以設置單元格的樣式

setFormula可以設置單元格的公式

setFormatter可以設置單元格的格式

等等，對應不同的需求，可以在單元格上做不同的設置

如何設置SpreadJS的表格樣式

設置樣式的方式跟html中的css類似，SpreadJS有很多樣式的屬性，通過設置對應的屬性來完成整體樣式的設置：

構造一個樣式並設置不同的屬性, 示例代碼如下:

var style = new GC.Spread.Sheets.Style();

style.backColor = ‘red’;

style.foreColor = ‘green’;

style.isVerticalText = ‘true’;

之後可以將此樣式設置給單元格, 行, 或者列:

//set style to cell.

sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport);

//set style to row.

sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport);

//set style to column.

sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport);

樣式在不同的層級結構中具有不同的優先級別, 如下: 單元格 行 列。

另外，SpreadJS 支持給樣式設置一個名稱, 並將這個命名過的樣式加入到表單的名稱樣式集合中。這樣讓樣式的使用和管理更方便。

構造一個名稱樣式, 並將此樣式添加到表單或者 Spread 控件的名稱樣式集合中。

var style = new GC.Spread.Sheets.Style();

style.name = ‘style1’;

style.backColor = ‘red’;

//add to sheet’s named style collection.

sheet.addNamedStyle(style);

//add to spread’s named style collection.

spread.addNamedStyle(style);

當名稱樣式添加到表單名稱樣式集合中後, 可以通過樣式的名稱找到它:

sheet.getNamedStyle(‘style1’);

spread.getNamedStyle(‘style1’);

如果名稱樣式不再使用, 你可以將其從名稱集合中刪除掉:

sheet.removeNamedStyle(‘style1’);

spread.removeNamedStyle(‘style1’);

如何用js給html表單設置style

首先，把CSS和JS標籤style屬性對照表了解了：

CSS 和 JavaScript 標籤 style 屬性對照表：

盒子標籤和屬性對照

CSS語法（不區分大小寫） JavaScript語法（區分大小寫）

border border

border-bottom borderBottom

border-bottom-color borderBottomColor

border-bottom-style borderBottomStyle

border-bottom-width borderBottomWidth

border-color borderColor

border-left borderLeft

border-left-color borderLeftColor

border-left-style borderLeftStyle

border-left-width borderLeftWidth

border-right borderRight

border-right-color borderRightColor

border-right-style borderRightStyle

border-right-width borderRightWidth

border-style borderStyle

border-top borderTop

border-top-color borderTopColor

border-top-style borderTopStyle

border-top-width borderTopWidth

border-width borderWidth

clear clear

float floatStyle

margin margin

margin-bottom marginBottom

margin-left marginLeft

margin-right marginRight

margin-top marginTop

padding padding

padding-bottom paddingBottom

padding-left paddingLeft

padding-right paddingRight

padding-top paddingTop

顏色和背景標籤和屬性對照

CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫）

background background

background-attachment backgroundAttachment

background-color backgroundColor

background-image backgroundImage

background-position backgroundPosition

background-repeat backgroundRepeat

color color

樣式標籤和屬性對照

CSS語法（不區分大小寫） JavaScript 語法（區分大小寫）

display display

list-style-type listStyleType

list-style-image listStyleImage

list-style-position listStylePosition

list-style listStyle

white-space whiteSpace

文字樣式標籤和屬性對照

CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫）

font font

font-family fontFamily

font-size fontSize

font-style fontStyle

font-variant fontVariant

font-weight fontWeight

文本標籤和屬性對照

CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫）

letter-spacing letterSpacing

line-break lineBreak

line-height lineHeight

text-align textAlign

text-decoration textDecoration

text-indent textIndent

text-justify textJustify

text-transform textTransform

vertical-align verticalAlign

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”

HTML

HEAD

TITLE New Document /TITLE

/HEAD

script language=”javascript”

function validate(){

if (document.all(“name”).value == “”){

document.all(“name”).style[“borderColor”]=”red”;//就是這裡

return;

}

}

/script

BODY

input type=”text” name=”name”

/BODY

/HTML