jQuery 如何在没有静态 CSS 文件的情况下动态生成和应用 CSS 规则？-css教程-PHP中文网

jQuery 如何在没有静态 CSS 文件的情况下动态生成和应用 CSS 规则？

Barbara Streisand

发布： 2024-12-11 07:34:10

原创

675 人浏览过

How Can jQuery Dynamically Generate and Apply CSS Rules Without a Static CSS File?

使用 jQuery 生成动态 CSS 规则

问题：

CSS 文件通常需要 CSS 规则的静态定义。如何在不使用静态 CSS 文件的情况下在运行时动态创建可重用的 CSS 规则？

解决方案：

使用 jQuery，我们可以附加一个

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");

登录后复制

示例：

要创建静态 CSS 规则 #my-window，我们将添加跟随 HTML 的 head 元素文档：

$("<style type='text/css'> #my-window { position:fixed; z-index:102; display:none; top:50%; left:50%; } </style>").appendTo("head");

登录后复制

用法：

以这种方式定义 CSS 规则后，可以使用 addClass() 方法将其应用于 DOM 元素：

$("element-to-style").addClass("my-window");

登录后复制

此方法可以轻松创建和应用可重用的 CSS 规则，而无需单独的 CSS文件。

以上是jQuery 如何在没有静态 CSS 文件的情况下动态生成和应用 CSS 规则？的详细内容。更多信息请关注PHP中文网其他相关文章！