纯前端表格控件SpreadJS使用教程：如何设置颜色

SpreadJS是面向企业级应用开发、基于HTML5的纯JavaScript电子表格控件。这篇文章介绍了在SpreadJS中如何设置颜色。

SpreadJS是一个面向企业级应用开发的综合性、高效能的基于HTML5的纯JavaScript的电子表格控件。它将电子表格、数据可视化及计算功能集成在用户的JavaScript Web应用程序中。为用户创建计算器、动态交互式仪表盘、丰富多彩的报表，以及更多激动人心的功能！

SpreadJS基于HTML5和jQuery技术，通过画布呈现在客户端。类似Excel的风格外观和用户界面行为为最终用户提供了丰富的、可交互的用户体验。同时还具有内容广泛的功能，可以快速方便地建立电子表格文档或者数据库web应用。SpreadJS也具有丰富的客户端JavaScript API，为您提供了所需要的灵活的客户端编程。这篇文章介绍了在SpreadJS中如何设置颜色。

SpreadJS正式版

16周年·技术服务月，全场采购满额送豪礼，iPhone11 / 华为Mate30 不限量供应；还有软件商城优惠券不限量免费领取，快来了解一下吧~

设置颜色

您可以给单元格，列，行，标题区域和小组件设置颜色。

颜色分为两种，前景色和背景色。前景色控制字体或内容的颜色，背景色控制背景的颜色。

您可以使用背景色设置背景色，使用前景色设置前景色。您可以在小组件中使用背景色您可以使用  options.grayAreaBackColor来设置灰色区域（内容区域的空白部分）的背景色。

参考代码

本代码为B2单元格设置了前景色和背景色：

JavaScript

//Set the backcolor and forecolor of cells.    var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);    cell.backColor("Blue");    cell.foreColor("Red");    cell.value("Color");

示例代码

以下代码演示了如何给标题区域设置颜色

JavaScript

//Set the backcolor and forecolor for the entire column header.     var row = activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);     row.backColor("Red");     row.foreColor("White");     //Set the backcolor for the second row header.     activeSheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.rowHeader).backColor("Yellow");

本教程内容到这里就结束啦，想要了解更多产品相关文章资讯可以继续关注我们哦~您也可以下载SpreadJS试用版尝试一下~

*想要购买SpreadJS正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都