所属产品: Mingcedar Studio DESIGNER

页面对象修改：文字、颜色、显隐和跳转 | Mingcedar Studio

读到 Tag 或输入值以后，页面通常要改文字、颜色、边框、显隐或跳转。这里按常用动作看，不要求先研究底层结构。

首次发布 2026-10-25T12:48:42.581608104Z 最近更新 2026-10-25T12:48:42.581607322Z

<section id="hqvisudesigner-runtime" class="docs-block docs-block-intro docs-block-current"> <span class="section-kicker">hqVisuDesigner</span> <h2>页面对象修改：文字、颜色、显隐和跳转</h2> <p>读到 Tag 或输入值以后，页面通常要改文字、颜色、边框、显隐或跳转。这里按常用动作看，不要求先研究底层结构。</p> <div class="docs-detail-list"> <article id="hqvisudesigner-runtime-item-1" class="docs-detail-row"> <strong>findComponent / getComponentData</strong> <p>findComponent(nameOrId) 返回真实 DOM，用于改样式；getComponentData(nameOrId) 返回导出数据，用于读取原始位置、尺寸、角度和元信息。</p> <ul> <li>想直接改样式时先用 findComponent</li><li>想读导出数据时再用 getComponentData</li><li>对象名建议尽量稳定，方便脚本查找</li> </ul> <pre class="docs-code-block"><code>var titleEl = hqVisuDesigner.findComponent("Title 1");

var titleData = hqVisuDesigner.getComponentData("Title 1");

if (titleEl && titleData) {

titleEl.style.color = "#e11d48";

hqVisuDesigner.setComponentLayout("Title 1", { width: titleData.width });

}</code></pre> </article><article id="hqvisudesigner-runtime-item-2" class="docs-detail-row"> <strong>setComponentText / Fill / Border / Visible</strong> <p>这是最常用的一组页面修改方法。它们适合在页面脚本、点击脚本和质量判断中快速改变对象显示效果，而不需要自行处理 DOM 细节。</p> <ul> <li>改字用 setComponentText</li><li>改填充用 setComponentFill</li><li>改边框用 setComponentBorder</li><li>显隐控制用 setComponentVisible</li> </ul> <pre class="docs-code-block"><code>hqVisuDesigner.setComponentText("Title 1", "READY");

hqVisuDesigner.setComponentFill("PumpBody", "#16a34a");

hqVisuDesigner.setComponentBorder("PumpBody", "#166534");

hqVisuDesigner.setComponentVisible("AlarmIcon", false);</code></pre> </article><article id="hqvisudesigner-runtime-item-3" class="docs-detail-row"> <strong>setComponentLayout：脚本直接改位置、尺寸和角度</strong> <p>当目标组件的位置、尺寸或角度需要根据运行状态计算时，可使用 setComponentLayout 调整布局。适用于拖动结果回写、特殊定位和多个条件共同决定布局的场景。</p> <ul> <li>x / y 控位置</li><li>width / height 控尺寸</li><li>angle 控角度</li><li>只改局部字段时也可以只传需要修改的字段</li> </ul> <pre class="docs-code-block"><code>hqVisuDesigner.setComponentLayout("Rectangle 1", {

x: 120,

y: 80,

width: 260,

height: 100,

angle: 0

});</code></pre> </article><article id="hqvisudesigner-runtime-item-4" class="docs-detail-row"> <strong>导航、语言和运行时刷新</strong> <p>同包跳转用 openPage，跨包用 openScreen，外部站点用 openWebsite。useLanguage 切换语言，refreshView 重新应用页面状态。</p> <ul> <li>同包跳转用 openPage</li><li>跨包跳转用 openScreen</li><li>外部网址用 openWebsite</li><li>语言切换用 useLanguage</li><li>重新应用页面状态用 refreshView</li> </ul> <pre class="docs-code-block"><code>hqVisuDesigner.openPage("Alarm");

hqVisuDesigner.openScreen("PUMP_OVERVIEW");

hqVisuDesigner.useLanguage("zh-CN");

hqVisuDesigner.refreshView();</code></pre> </article><article id="hqvisudesigner-runtime-item-5" class="docs-detail-row"> <strong>writeVariable：只保存页面运行时状态</strong> <p>页面需要记录当前 tab、当前选中设备或最近一次交互动作时，可以写入页面变量。该方法只适合页面联动，不等同于写 PLC，也不应代替正式 Tag 写值。</p> <ul> <li>适合切换 tab、筛选状态和当前选择</li><li>不适合设备控制</li><li>正式设备写入仍应使用 Write Tag 或写值动作</li> </ul> <pre class="docs-code-block"><code>hqVisuDesigner.writeVariable("currentTab", "alarm");

hqVisuDesigner.writeVariable("selectedDevice", "Pump01");</code></pre> </article><article id="hqvisudesigner-runtime-item-6" class="docs-detail-row"> <strong>浏览器存储：只保存界面偏好</strong> <p>ReadBrowserStorage、WriteBrowserStorage 和 RemoveBrowserStorage 保存区域选择、折叠状态等页面偏好。不要用浏览器存储保存设备控制状态、关键业务数据或长期审计记录。</p> <ul> <li>适合界面偏好和当前选择</li><li>不适合作为设备控制链路</li><li>不适合保存关键业务记录</li> </ul> <pre class="docs-code-block"><code>var area = ReadBrowserStorage("selectedArea", "A01", "local");

WriteBrowserStorage("selectedArea", area, "local");

RemoveBrowserStorage("selectedArea", "local");</code></pre> </article> </div> </section>