5

我在p:selectonemenu我的一个网页上使用 primefaces 组件。我正在尝试使用我自己的 css（不使用!important）对其应用样式，但它没有从我自己的外部 css 文件中获取样式。它从某个地方采用了一些内联样式，但我不希望该组件具有那种内联样式。我希望它使用我自己的外部 css 文件中的样式。

我没有从这种内联样式的来源得到。这是来自任何javascript吗？我需要帮助，下面是我的代码。

Primefaces 代码

<p:selectOneMenu value="#{Controller.property}" id="dropDown">
  <f:selectItem itemLabel="Select One" itemValue="0" />
  <f:selectItems value="#{controller.property}"/>
</p:selectOneMenu>

HTML 解释代码

<div id="j_idt40" class="ui-selectonemenu ui-widget ui-state-default 
ui-corner-all ui-helper-clearfix" style="width: 190px;">
4

2 回答 2

2

这是来自任何javascript吗？

这是正确的。此内联样式由PrimeFaces.widget.SelectOneMenu.initWidthsin设置primefaces.js。

唯一可以覆盖它的方法!important是自己指定内联样式。

<p:selectOneMenu ... style="width: 500px">

您也可以PrimeFaces.widget.SelectOneMenu.initWidths使用自定义 JS 文件覆盖 ，但这会影响所有<p:selectOneMenu>组件。

于 2013-02-28T12:10:50.900 回答
0

Inline styles have the greatest "specificity", and they override all applicable rules, so your only remedy is !important (unless you can override the style property value somehow).

EDIT: Sorry for overlooking the core question. So, your recipe is as follows:

Insert

 <script>
   debugger;
 </script>

at the end of your <body>, open DevTools, and load the page.

Now, once you are in your DevTools debugger, switch to the Elements panel, and find the element that receives the inline style. It should not have it just yet.

Right-click this element and in the context menu choose Break on... | Attribute modifications. Now, when the style attribute value changes, you should break on the respective JavaScript line. Good luck!

于 2013-02-21T08:13:06.063 回答