公告:所有在
2025 年 4 月 15 日之前注册使用 Earth Engine 的非商业项目都必须
验证是否符合非商业性质的资格条件,才能继续使用 Earth Engine。
ui.Panel.style
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
返回微件的样式 ActiveDictionary,该对象可修改以更新微件的样式。
行为与 CSS 对应项类似的属性:
- height、maxHeight、minHeight(例如“100px”)
- width、maxWidth、minWidth(例如“100px”)
- 内边距、外边距(例如“4px 4px 4px 4px”或简单的“4px”)
- color、backgroundColor(例如“red”或“#FF0000”)
- 边框(例如“1px solid black”)
- borderColor(例如“red black blue #FF0000”)
- borderRadius(例如“10px”)
- borderStyle(例如“solid dashed none dotted”)
- borderWidth(例如“1px 0px 1px 0px”)
- fontSize(例如“24px”)
- fontStyle(例如“italic”)
- fontWeight(例如“bold”或“100”)
- fontFamily(例如“monospace”或“serif”)
- textAlign(例如“left”或“center”)
- textDecoration(例如“underline”或“line-through”)
- whiteSpace(例如“nowrap”或“pre”)
- 显示(true 或 false)
支持的自定义布局属性(请参阅 ui.Panel.Layout 文档):
- stretch(“horizontal”“vertical”“both”)
- 位置('top-right'、'top-center'、'top-left'、'bottom-right'、...)
用法 | 返回 |
---|
Panel.style() | ui.data.ActiveDictionary |
参数 | 类型 | 详细信息 |
---|
this:ui.widget | ui.Widget | ui.Widget 实例。 |
示例
Code Editor (JavaScript)
// Define a UI widget and add it to the map.
var widget = ui.Panel({style: {width: '400px', height: '200px'}});
Map.add(widget);
// View the UI widget's style properties; an ActiveDictionary.
print(widget.style());
// ActiveDictionaries are mutable; set a style property.
widget.style().set('backgroundColor', 'lightgray');
print(widget.style());
// Define the UI widget's style ActiveDictionary as a variable.
var widgetStyle = widget.style();
print(widgetStyle);
// Set the UI widget's style properties from the ActiveDictionary variable.
widgetStyle.set({border: '5px solid darkgray'});
print(widgetStyle);
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-25。
[null,null,["最后更新时间 (UTC):2025-07-25。"],[[["\u003cp\u003e\u003ccode\u003ewidget.style()\u003c/code\u003e returns an ActiveDictionary that can be used to get and set the widget's style properties, similar to CSS.\u003c/p\u003e\n"],["\u003cp\u003eMany standard CSS properties like \u003ccode\u003ewidth\u003c/code\u003e, \u003ccode\u003eheight\u003c/code\u003e, \u003ccode\u003ecolor\u003c/code\u003e, \u003ccode\u003efontSize\u003c/code\u003e, etc., are supported for styling widgets.\u003c/p\u003e\n"],["\u003cp\u003eCustom layout properties like \u003ccode\u003estretch\u003c/code\u003e and \u003ccode\u003eposition\u003c/code\u003e are available for advanced layout control within UI panels.\u003c/p\u003e\n"],["\u003cp\u003eThe ActiveDictionary returned by \u003ccode\u003ewidget.style()\u003c/code\u003e is mutable, allowing for dynamic updates to the widget's appearance.\u003c/p\u003e\n"],["\u003cp\u003eYou can directly modify the style properties using the ActiveDictionary's \u003ccode\u003eset\u003c/code\u003e method or by assigning a new style object.\u003c/p\u003e\n"]]],["The `widget.style()` method returns an `ActiveDictionary` that represents a widget's style properties, allowing modifications to the widget's appearance. Modifiable properties include dimensions (height, width), spacing (padding, margin), colors (color, backgroundColor), text attributes (font, size, alignment, decoration), border, visibility, and white space handling. Custom layout properties like 'stretch' and 'position' are also supported. The `ActiveDictionary` can be updated using `set()` and then applied to the widget.\n"],null,["# ui.Panel.style\n\n\u003cbr /\u003e\n\nReturns the widget's style ActiveDictionary, which can be modified to update the widget's styles.\n\n\u003cbr /\u003e\n\nProperties which behave like their CSS counterparts:\n\n- height, maxHeight, minHeight (e.g. '100px')\n\n- width, maxWidth, minWidth (e.g. '100px')\n\n- padding, margin (e.g. '4px 4px 4px 4px' or simply '4px')\n\n- color, backgroundColor (e.g. 'red' or '#FF0000')\n\n- border (e.g. '1px solid black')\n\n- borderColor (e.g. 'red black blue #FF0000')\n\n- borderRadius (e.g. '10px')\n\n- borderStyle (e.g. 'solid dashed none dotted')\n\n- borderWidth (e.g. '1px 0px 1px 0px')\n\n- fontSize (e.g. '24px')\n\n- fontStyle (e.g. 'italic')\n\n- fontWeight (e.g. 'bold' or '100')\n\n- fontFamily (e.g. 'monospace' or 'serif')\n\n- textAlign (e.g. 'left' or 'center')\n\n- textDecoration (e.g. 'underline' or 'line-through')\n\n- whiteSpace (e.g. 'nowrap' or 'pre')\n\n- shown (true or false)\n\nSupported custom layout properties (see ui.Panel.Layout documentation):\n\n- stretch ('horizontal', 'vertical', 'both')\n\n- position ('top-right', 'top-center', 'top-left', 'bottom-right', ...)\n\n| Usage | Returns |\n|-----------------|--------------------------|\n| Panel.style`()` | ui.data.ActiveDictionary |\n\n| Argument | Type | Details |\n|-------------------|-----------|-------------------------|\n| this: `ui.widget` | ui.Widget | The ui.Widget instance. |\n\nExamples\n--------\n\n### Code Editor (JavaScript)\n\n```javascript\n// Define a UI widget and add it to the map.\nvar widget = ui.Panel({style: {width: '400px', height: '200px'}});\nMap.add(widget);\n\n// View the UI widget's style properties; an ActiveDictionary.\nprint(widget.style());\n\n// ActiveDictionaries are mutable; set a style property.\nwidget.style().set('backgroundColor', 'lightgray');\nprint(widget.style());\n\n// Define the UI widget's style ActiveDictionary as a variable.\nvar widgetStyle = widget.style();\nprint(widgetStyle);\n\n// Set the UI widget's style properties from the ActiveDictionary variable.\nwidgetStyle.set({border: '5px solid darkgray'});\nprint(widgetStyle);\n```"]]