如何从动态数据的 Javascript 设置 CSS

Question

我想根据有效性设置 'status' 标签及其 css 字体颜色，并尝试了以下操作：

/**
 * To return status and set their label color according to expiration date
 */

function getStatusName(DueDate) {

  var a = app.pages.Dashboard.descendants.Table2Body.children.Table2Row.children.status;

  var status = 'Valid';

  if (DueDate < new Date()) {
    status = 'Expired';
  }

  switch(status) {
    case 'Valid':
        a.styles.color = green;
        break;
    case 'Expired':
        a.styles.color = red;
        break;
    default:
        return;
  }

  return status;
}

除了设置该标签的颜色外，该标签有效。在 Js 中设置 CSS 的正确方法是什么？这是我在 Google App Maker 中的服务器脚本之一。

Answer 1

如果 a 是正确的元素，则以下代码应该有效（与您的代码不同的是 "style" 而不是 "styles" 并将 css 值封装在双引号中）：

/**
 * To return status and set their label color according to expiration date
 */

function getStatusName(DueDate) {

  var a = app.pages.Dashboard.descendants.Table2Body.children.Table2Row.children.status;

  var status = 'Valid';

  if (DueDate < new Date()) {
    status = 'Expired';
  }

  switch(status) {
    case 'Valid':
        a.style.color = "green";
        break;
    case 'Expired':
        a.style.color = "red";
        break;
    default:
        return;
  }

  return status;
}

更多信息：https://www.w3schools.com/js/js_htmldom_css.asp

Answer 2

我宁愿使用标签样式的绑定属性:

@datasource.item.DueDate < new Date() ? ['green'] : ['red']

和一对CSS类:

.green {
  color: green;
}

.red {
  color: red;
}

相同的技巧应该适用于标签的文本绑定：

@datasource.item.DueDate < new Date() ? 'Valid' : 'Expired'

如何从动态数据的 Javascript 设置 CSS

How to set the CSS from Javascript of a dynamic data

javascript

css

google-app-maker