`

使用jQuery或JavaScript 加载 css 文件

 
阅读更多

有时我们可能会需要使用 jQuery 来加载一个外部的 css 文件，如在切换页面布局时。思路是创建一个 link 元素，并将它添加到 <head> 标记中即可，下边首先看看怎么使用 jQuery 来实现。

下边是我喜欢的写法：

$("<link>")
    .attr({ rel: "stylesheet",
        type: "text/css",
        href: "site.css"
    })
    .appendTo("head");

 

有些朋友可能会使用下边的写法，只是形式有些小差异(append appendTo)，原理还是一样的。

 

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
    rel: "stylesheet",
    type: "text/css",
    href: "/Content/Site.css"
});

 

最后，有的朋友可能希望直接在 javascript 中使用，方法如下：

 

function addCSS() {
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = '/Content/Site.css';
    document.getElementsByTagName("head")[0].appendChild(link);
}

 

如果是在 web 交互时，我们可以使用上述的方法通过 jQuery 或者 javascript 来引入一个 css 文件，否则还是建议使用原始的方法。

 

转载地址：http://www.jquery001.com/jquery-load-a-css-file.html

分享到：
| EasyUI中的dialog弹出后只是有个阴影,窗口 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery css 加载插件

    在这些加载CSS文件中，开发者可能会定义旋转的圆圈、滑动的条形、闪烁的文字等各种动画效果。通过使用CSS3的动画属性，如`@keyframes`，可以创建出平滑的过渡效果。例如，`animation`属性可以设置动画的名称、持续...

    jquery-ui.css、jquery-ui.js下载

    在本文中，我们将详细探讨`jquery-ui.css`和`jquery-ui.js`这两个关键文件，并讨论如何在项目中有效地使用它们。 首先，`jquery-ui.css`是jQuery UI的核心样式文件，它包含了所有组件的默认样式和主题。这个文件...

    30 个 jQuery & CSS3 加载动画和进度栏插件

    而“Minimalistic Circular Progress Bar”则适用于显示特定任务的进度，如视频缓冲或文件上传。这些插件大多数都支持响应式设计，能适应不同的设备和屏幕尺寸。 在实际应用中，选择合适的加载动画和进度栏插件要...

    jquery css3进度条加载动画特效

    标题中的“jQuery CSS3进度条加载动画特效”指的是利用JavaScript库jQuery和CSS3技术来创建一种视觉效果，即在网页内容加载时显示的进度条。这种特效可以提供用户反馈，表明页面正在加载，并且增加了用户体验的互动...

    jquery 实现的等待加载页面

    开发者可以通过研究这些文件来了解如何使用jQuery创建动态的加载效果，提升网页的用户体验。这涉及到理解jQuery的选择器、事件处理、CSS动画和DOM操作等核心概念。同时，这也是一种优化网页性能的方法，因为即使在...

    jquery-ui js/css通用文件

    `jquery-ui-1.11.4.custom` 可能包含 `.css` 文件，如 `jquery-ui.css` 或 `ui.theme.css`，它们定义了按钮、对话框、滑块等元素的样式。 2. **JavaScript 文件**：jQuery UI 的核心功能由 JavaScript 实现。主要的...

    js加载动画，jquery加载动画，css加载动画，html加载动画

    本文将深入探讨使用JavaScript（js）、jQuery（jq）和CSS（层叠样式表）创建加载动画的方法，并结合提供的文件名称，我们将特别关注`jquery.shCircleLoader`这个加载动画插件。 首先，让我们从HTML加载动画开始。...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...

    jquery插件jquery-ui-1.8.18.custom.min.js及css文件

    - **加载顺序**：通常需要先引入jQuery库，然后是jQuery UI的JS文件，最后是CSS文件，确保所有依赖都被正确加载。 - **主题定制**：可以使用在线工具（如ThemeRoller）创建自定义主题，然后将生成的CSS文件替换原有...

    jQuery+CSS3鼠标点击按钮加载动画特效

    总的来说，"jQuery+CSS3鼠标点击按钮加载动画特效"项目展示了如何结合使用这两种技术来创建交互式用户体验。开发者可以参考这些代码实现自己的按钮加载动画，或者根据需求进行修改和扩展。这不仅有助于提升网页的...

    css和jquery实现页面加载前的等待界面

    "css和jquery实现页面加载前的等待界面"这一主题关注的就是如何在用户等待网页内容加载时提供一种视觉反馈，以改善用户体验。加载界面，也称为预加载器，通常是一个简洁的图形或者动画，它在网页内容完全加载之前...

    jQuery+animate.css自定义弹窗动画插件

    当事件发生时，JavaScript会动态添加或移除animate.css中的动画类，从而启动或停止动画效果。此外，JavaScript还需要管理弹窗的显示和隐藏状态，以及处理可能的交互，比如关闭按钮的点击事件。 在jQuery中，`$...

    sql jquery asp.net javascript css

    在软件开发领域，SQL、jQuery、ASP.NET、JavaScript和CSS是构建现代Web应用程序不可或缺的关键技术。这些技术分别处理数据管理、前端交互、后端逻辑、客户端脚本和样式设计，形成了一个强大的组合。 首先，SQL...

    jquery mobile 滚动加载内容

    当我们谈论“jQuery Mobile 滚动加载内容”时，我们实际上是在讨论一种动态加载技术，即在用户滚动页面到接近底部时，通过 AJAX（异步 JavaScript 和 XML）技术从服务器获取并插入更多内容，以实现无尽滚动的效果。...

    关于jQuery-Ui的引用文件

    同样将其放置在页面的 `&lt;head&gt;` 或 `&lt;body&gt;` 标签底部，但需确保在引用 CSS 文件之后，jQuery 文件之前： ```html &lt;script src="path/to/jquery-ui.min.js"&gt; ``` ### 2. 主题系统 jQuery UI 提供了一个强大的主题...

    jquery页面加载效果

    "jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画，它能够以吸引人的视觉方式展示网页内容正在加载的过程，使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用，尤其在内容分块...

    jQuery CSS3网页预加载动画代码.zip

    总结来说，"jQuery CSS3网页预加载动画代码.zip" 提供了一个使用jQuery和CSS3实现的预加载动画实例，特别是蓝色圆点的旋转效果，这在网页设计中是一个实用且美观的技巧，有助于提升用户体验。开发人员可以通过学习这...

    纯JavaScript,CSS,jQuery静态旅游网站模板

    3. JavaScript文件：包括主JS文件和其他可能的插件或库，如jQuery。 4. 图片和媒体资源：用于展示旅游景点、服务等，可能是JPEG、PNG、SVG或视频格式。 5. 其他资源：如图标字体、字体文件、JSON数据文件等，用于...

    jQuery javascript css 在线截图 asp.net2005

    标题中的“jQuery javascript css 在线截图 asp.net2005”揭示了这是一个关于使用jQuery、JavaScript、CSS技术实现在线截图功能的项目，且该功能是构建在ASP.NET 2005框架上的。让我们详细探讨一下这些技术及其在...

Magicbox
Global site tag (gtag.js) - Google Analytics