APEX 21.1.6中使用Dynamic Action设置Display Only文本样式不生效

核心原因 #

APEX 中Display Only类型的表单项DOM渲染结构和普通可输入项/只读项不同：普通表单项的ID选择器#PXXX_ITEM直接指向显示输入内容的元素，但Display Only项的#PXXX_ITEM指向的是隐藏存储值的<input>节点，实际显示文本的是ID为PXXX_ITEM_DISPLAY的同级<span>元素，你之前的样式设置大概率是作用到了隐藏节点上，所以看不到效果。

修复步骤 #

• 调整动态操作中样式设置的目标选择器：
  如果你用的是内置「设置样式」动作，「受影响的元素」不要直接选「条目」指向目标Display Only项，改为选「jQuery选择器」，值填#PXXX_ITEM_DISPLAY（把PXXX_ITEM替换为你的实际项名）
• 如果你用的是「执行JavaScript代码」动作，修改代码指向正确的显示节点，示例代码：

  // 原生JS写法
  document.getElementById("P1_AMOUNT_DISPLAY").style.color = "green";
  // APEX 封装jQuery写法
  apex.jQuery("#P1_AMOUNT_DISPLAY").css("color", "#27ae60");
  

• 如果调整选择器后仍然不生效，打开浏览器F12开发者工具，选中实际显示的文本元素，在「样式」面板查看你设置的color属性是否被页面其他自定义CSS覆盖，如果被划掉则可以在颜色值后加!important提高优先级，比如值填green !important

为什么测试项目可以正常运行 #

大概率是你测试项目中使用的不是标准Display Only项，而是普通文本项勾选了「只读」属性，只读项的DOM结构和可输入项一致，#PXXX_ITEM直接指向显示节点，所以样式设置可以生效。

内容的提问来源于stack exchange，提问作者Ajtony Varga