如何在 Jquery 中仅更改 Div 标签的标题背景颜色

发布于 2024-12-08 17:35:22 字数 287 浏览 1 评论 0原文

我在使用 JQuery 构建的模式对话框中有一个 div 标签,如下所示: div id="dialogxxxx" title="xxxxx" 。我只想单独更改标题的字体和背景颜色,即仅更改标题显示的位置。现在它有默认的颜色和字体。我想将其更改为特定颜色,但不想更改整个div的背景颜色和字体,只想更改显示标题的地方。有办法做到这一点吗?我尝试向 div 添加样式标签,但这会更改整个 div 的背景颜色,而不仅仅是标题。我也尝试过做 div#title,但这也没有帮助。

非常感谢任何指示/帮助。

谢谢,

阿莎

I have a div tag in my modal dialog built using JQuery like this: div id="dialogxxxx" title="xxxxx" . I want to just change the font and background color of the title alone, i.e. only the place where the title is displayed. Right now it has a default color and font. I want to change it to a specific color, but do not want to change the background color and font of the entire div, just the place where the title is displayed. Is there a way to do this? I tried adding style tag to the div, but that changes the background color of the entire div, not the title alone. I also tried doing div#title, that didnt help either.

Any pointer/help is greatly appreciated.

Thanks,

Asha

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

衣神在巴黎 2024-12-15 17:35:22

如果您想要一种快速而肮脏的方式,您可以简单地覆盖 .ui-widget-header css 规则,例如

.ui-widget-header {
  background: red;
}

查看此操作:http://jsfiddle.net/william/NgVAu/

如果您想要一种更易于维护的方法,您应该使用 ThemeRoller,配置“标题/工具栏”部分。如果打开 css 文件,您可以找到 ThemeRoller 的 URL 及其所使用的主题。它位于“查看和修改此主题”之后的第二批评论中,例如

/*
 * jQuery UI CSS Framework @VERSION
 *
 * ...
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?...
 */

If you want a quick-n-dirty way, you can simply override the .ui-widget-header css rule, e.g.

.ui-widget-header {
  background: red;
}

See this in action: http://jsfiddle.net/william/NgVAu/.

If you want a more maintainable approach, you should use the ThemeRoller, configuring the "Header/Toolbar" section. If you open up your css file, you can find a URL to the ThemeRoller with the theme it's using. It is located in the second lot of comment, after "To view and modify this theme", e.g.

/*
 * jQuery UI CSS Framework @VERSION
 *
 * ...
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?...
 */
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文