有没有办法动态更改按钮的 CSS 类？

发布于 2024-07-13 17:56:20 字数 754 浏览 7 评论 0原文

我正在开发一个基于 Wicket 的 Web 应用程序。在应用程序中，有些按钮并非每个用户都有权使用。这些按钮实际上是简单的链接，例如

<a wicket:id="publishButton" title="Publish" class="rightPanel_publish"><wicket:message key="publish"/></a>

带有一个 CSS 类（来自外部 CSS 文件）来设置其视觉外观，例如

a.rightPanel_publish {
    display: block;
    width: 90px;
    height: 27px;
    background: url( ../imgs/right_panel_icon03.gif ) left top repeat-y;
    text-decoration: none;
    color: black;
    padding: 12px 0px 0px 35px;
}

当用户无权使用该按钮时，该链接将被禁用（在 Java 中）并且 CSS 会被禁用，例如由于某种原因，不再使用。

我的问题是：有没有办法识别链接在运行时被禁用并更改 CSS 类？我宁愿避免使用 javascript（到目前为止设法使整个项目保持 JS 自由......），并且更喜欢适用于所有浏览器的东西。

非常感谢，

尤瓦尔=8-)

原文

I'm working on a Wicket-based web application. In the application there are buttons that not every user is authorized to use. These buttons are actually simple links, e.g.

<a wicket:id="publishButton" title="Publish" class="rightPanel_publish"><wicket:message key="publish"/></a>

with a CSS class (from an external CSS file) that sets their visual appearance, e.g.

a.rightPanel_publish {
    display: block;
    width: 90px;
    height: 27px;
    background: url( ../imgs/right_panel_icon03.gif ) left top repeat-y;
    text-decoration: none;
    color: black;
    padding: 12px 0px 0px 35px;
}

When the user is not authorized to use the button, the link is disabled (in Java) and the CSS, for some reason, is not used anymore.

My question is this: is there a way to identify that the link is disabled at runtime and change the CSS class? I would rather avoid using javascript (managed to keep the entire project JS-free so far...), and prefer something that would work with all browsers.

Thanks a bunch,

Yuval =8-)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

极度宠爱 2024-07-20 17:56:20

不幸的是，我不知道如何在没有 JS 的情况下更改按钮页面。 CSS、Java 和其他所有内容在页面加载时运行，页面加载后与页面交互的唯一方法是通过 JS。

然而，这里的 JS 可以在任何浏览器（IE 6+、Safari、Opera、FF 等）中工作，

  if(document.getElementById('foo'))
  {
    document.getElementById('foo').className='bar';
  }

Unfortunately I don't know of a way to change a button's page without JS. CSS, Java and everything else runs while the page is loading, after the page has loaded the only way to interact with the page is via JS.

However here is the JS that works in any browser (IE 6+, Safari, Opera, FF, etc),

  if(document.getElementById('foo'))
  {
    document.getElementById('foo').className='bar';
  }

回复收藏 0 原文

雪落纷纷 2024-07-20 17:56:20

您还可以根据用户身份验证状态，使用 AttributeModifier 更改按钮的外观（即 css 类）：

myButton.add(new AttributeModifier("class", new AbstractReadOnlyModel<String>() {

        private static final long serialVersionUID= 1L;

        @Override
        public String getObject () {
            if (!isAuthorized()) {
                return "rightPanel_unauthorized";
            }
            return "rightPanel_publishbutton";
        }
    }));

然后在 CSS 中根据需要定义“.rightPanel_unauthorized”样式。

You can also change the button's appearance (i.e. css class) with an AttributeModifier, based on the user authentication state:

myButton.add(new AttributeModifier("class", new AbstractReadOnlyModel<String>() {

        private static final long serialVersionUID= 1L;

        @Override
        public String getObject () {
            if (!isAuthorized()) {
                return "rightPanel_unauthorized";
            }
            return "rightPanel_publishbutton";
        }
    }));

In your CSS, you then define the ".rightPanel_unauthorized" style as you need it.

回复收藏 0 原文

瘫痪情歌 2024-07-20 17:56:20

如果没有某种脚本，就无法做到这一点。 “DHTML”中的“D”代表“Javascript”：P

编辑：实际上，既然你说某物正在禁用链接/按钮，那么某物也可以/应该附加一个“禁用”类（让 CSS 注意到的唯一 x 浏览器方法）到同一元素。运行时切换不涉及其中——如果一个事物正在改变状态，它需要彻底改变。

回复收藏 0 原文

仅一夜美梦 2024-07-20 17:56:20

检票口链接取代了带有的标签禁用时。

应用 CSS 时请记住这一点，例如：

.rightPanel_publish_button {
  display: block;
  width: 90px;
  height: 27px;
  background: url( ../imgs/right_panel_icon03.gif ) left top repeat-y;
  text-decoration: none;
  color: black;
  padding: 12px 0px 0px 35px;
}

Wicket links replace the <a> tag with a <span> when disabled.

Keep that in mind when applying CSS, e.g.:

.rightPanel_publish_button {
  display: block;
  width: 90px;
  height: 27px;
  background: url( ../imgs/right_panel_icon03.gif ) left top repeat-y;
  text-decoration: none;
  color: black;
  padding: 12px 0px 0px 35px;
}

回复收藏 0 原文