SetBackgroundColor基于HEX代码

时间:2017-09-26 13:13:37

标签: google-sheets

我想根据另一个单元格中的十六进制值将背景颜色设置为单元格。到目前为止我做了什么:

function setColorHEX(hex) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var cell = ss.getActiveCell();
  cell.setBackground(hex);
}

enter image description here

有人知道我做错了吗?

感谢您的帮助。

电贺, yab86

3 个答案:

答案 0 :(得分:0)

您无法使用用户drfined函数设置背景或其他格式。此外,您的功能不会引用工作表。要运行一个函数,您可以使用:

function setColorHEX() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var cell=ss.getActiveSheet().getActiveCell()
  cell.setBackground("#dc281e");
}

注意'ss.getActiveSheet()。getActiveCell()'。这可以由onEdit触发。但是,使用条件格式会更加容易。右键单击要设置背景的单元格。选择“条件格式”。选择你想要的条件。在格式化样式下,单击填充颜色。在弹出窗口中单击自定义,您可以输入十六进制颜色。

答案 1 :(得分:0)

我试图做同样的事情,发现了这个脚本。效果很好,尽管我必须突出显示所有现有的单元格并将其复制/粘贴回去以使其正常工作。信用:https://gist.github.com/wjmazza/131c050b88bb2a595d6049707693ec13

enter image description here

/*

This script is meant to be used with a Google Sheets spreadsheet. When you edit a cell containing a
valid CSS hexadecimal colour code (like #000 or #000000), the background colour will be changed to
that colour and the font colour will be changed to the inverse colour for readability.

To use this script in a Google Sheets spreadsheet:
1. go to Tools » Script Editor » Spreadsheet;
2. erase everything in the text editor;
3. change the title to "Set colour preview on edit";
4. paste this code in;
5. click File » Save.
*/

/*********
** Properties
*********/
/**
 * A regex pattern matching a valid CSS hex colour code.
 */
var colourPattern = /^#([0-9a-f]{3})([0-9a-f]{3})?$/i;


/*********
** Event handlers
*********/
/**
 * Sets the foreground or background color of a cell based on its value.
 * This assumes a valid CSS hexadecimal colour code like #FFF or #FFFFFF.
 */
function onEdit(e){
  // iterate over cell range  
  var range = e.range;
  var rowCount = range.getNumRows();
  var colCount = range.getNumColumns();
  for(var r = 1; r <= rowCount; r++) {
    for(var c = 1; c <= colCount; c++) {
      var cell = range.getCell(r, c);
      var value = cell.getValue();

      if(isValidHex(value)) {
        cell.setBackground(value);
        cell.setFontColor(getContrastYIQ(value));
      }
      else {
        cell.setBackground('white');
        cell.setFontColor('black');
      }
    }
  }
};


/*********
** Helpers
*********/
/**
 * Get whether a value is a valid hex colour code.
 */
function isValidHex(hex) {
  return colourPattern.test(hex);
};

/**
 * Change text color to white or black depending on YIQ contrast
 * https://24ways.org/2010/calculating-color-contrast/
 */
function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(5,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

答案 2 :(得分:0)

我对@ow3n 的回答做了改动。我的版本使用批处理和映射操作来减少代码量和执行时间。根据 Best Practices | Apps Script 的说法,使用批处理操作可以将他们的示例代码段加速 70 倍。

对于我的应用程序,使用了固定范围。然而,这可以适应使用由 onEdit 事件给定的范围。我的版本还使用“他们自己的”十六进制值为单元格着色,尽管我将原始问题视为询问如何根据另一个单元格的值为单元格着色。我也不想显示十六进制文本,所以我将字体颜色设置为与背景相同的颜色。

我的版本:

var colorPattern = /^#([0-9a-f]{3})([0-9a-f]{3})?$/i;

function onEdit(e){
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  
  var range1 = sheet.getRange('range1');
  var range2 = sheet.getRange('range2');
  
  colorRange(range1);
  colorRange(range2);
};

function colorRange(range) {
  var hexs = range.getValues();
  
  hexs = hexs.map( 
    (row) => 
      row.map(
        (value) => colorPattern.test(value) ? value : "white"
      )
  )
  
  range.setBackgroundColors(hexs);
  range.setFontColors(hexs);
}