用JavaScript动态建立或增加CSS样式表的实现方法

1、简单的方法，不管不顾，直接这样就可以：

document.createStyleSheet().cssText

=

'标签{color:red'

+

//

这个注释只在当前JS中帮助理解，并不会写入CSS中

'width:300pxheight:150px}'

+

'.类名{……}'

+

'#ID们{……}'

//完活。我喜欢分号这样写，和指令书写的起始位置对齐比较好一点，尤其是后面有其它语句的时候。

2、完善一点的方法，防止重复添加，可以通过添加样式表ID并对其判断来实现：

if

(!document.styleSheets['要建立的样式表ID如theforever'])

{

//先检查要建立的样式表ID是否存在，防止重复添加

var

ss

=

document.createStyleSheet()

ss.owningElement.id

=

'要建立的样式表ID如theforever'

ss.cssText

=

'标签{display:inline-blockoverflow:hidden'

+

//

这个注释只在当前JS中帮助理解，并不会写入CSS中

'text-align:leftwidth:300pxheight:150px}'

+

'.类名{……}'

+

'#ID们{……}'

}

以上这篇用JavaScript动态建立或增加CSS样式表的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

设置样式的方式跟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')

---