js引用外部css

在JavaScript中引用外部CSS文件可以通过多种方式实现，以下是一些常见的方法：

1. 使用`<link>`标签（推荐）

这是最常见和推荐的方式，通过HTML的<link>标签来引入外部CSS文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="example">Hello, World!</div>
</body>
</html>

2. 使用JavaScript动态创建`<link>`标签

如果你需要在运行时动态加载CSS文件，可以使用JavaScript来创建并插入<link>标签。

function loadCSS(url) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    document.head.appendChild(link);
}

// 使用示例
loadCSS('styles.css');

3. 使用`@import`规则

虽然不推荐在JavaScript中直接使用，但你可以在CSS文件中使用@import规则来引入其他CSS文件。

/* styles.css */
@import url('another-styles.css');

或者在CSS文件中直接使用相对路径：

/* styles.css */
@import 'another-styles.css';

4. 使用JavaScript直接修改样式

如果你只需要修改少量样式，可以直接使用JavaScript来修改元素的样式。

document.body.style.backgroundColor = 'lightblue';
document.querySelector('.example').style.color = 'red';

优势

分离关注点：通过外部CSS文件，可以将样式和内容分离，使代码更清晰、更易于维护。
缓存：浏览器可以缓存外部CSS文件，减少页面加载时间。
复用：外部CSS文件可以在多个页面中共享，提高代码复用性。

应用场景

大型项目：在大型项目中，使用外部CSS文件可以更好地组织和管理样式。
动态加载：在需要根据用户操作或条件动态加载样式时，可以使用JavaScript动态创建<link>标签。

常见问题及解决方法

1. CSS文件未加载

原因：路径错误、网络问题、浏览器缓存。

解决方法：

检查CSS文件路径是否正确。
清除浏览器缓存或使用无痕模式。
确保网络连接正常。

2. 样式未生效

原因：CSS选择器优先级问题、样式被覆盖、JavaScript代码错误。

解决方法：

检查CSS选择器优先级，确保样式没有被其他样式覆盖。
使用浏览器的开发者工具检查元素的样式，查看是否有其他样式覆盖。
检查JavaScript代码，确保没有语法错误或逻辑错误。

通过以上方法，你可以有效地在JavaScript中引用外部CSS文件，并解决常见的加载和样式问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue 项目引用（外部） js、css

引入 css 有 2 种方式：方式 1 import '../../...../bootstrap/3.3.4/css/bootstrap.min.css"; /* 这个js目录有三级 */ @import "../../...../static/home/zzsc.css"; @import "../../../static/home/hoverifyBootnav.css"; 2..../static/home/bootstrap.min.js"; import "../../...../static/home/hoverifyBootnav.js"; import "../../../static/home/init.js";

5.8K1 0

vue如何引用外部js_引入外部js文件

省略--> 帮BOSS | 测评 css" href="//at.alicdn.com/t/font_43459_d124thd3lgu.css.../xxx.js"> // 暴力引入缺点：不使用该js插件的组件也会加载，而我只想在某个Vue组件中使用该js插件。.../js/xxx.js' //注意路径缺点：下载的静态文件才可以方式三在Vue组件加载完后，手动操作DOM插入js插件。...将方式三包装成一个js插件，使用 Promise，js加载成功，调用resolve，js加载失败，调用reject。...// 导入外部js import Vue from 'vue' Vue.component('remote-script', { render: function (createElement)

13.1K5 0

vue.js引入外部CSS样式和外部JS文件的方法

学习Vue.js动画时，需要引入一个animate.css，如何全局引入外部文件呢？一.引入外部CSS样式文件 1. 在app.vue中下直接引入对应的路径 ?...image 使用@import引入外部css，作用域是全局的，也可在相应的单vue组件引入，import并不是引入代码到里面，而是发起新的请求获得样式资源，并且没有加scoped...@import改成引入外部样式 ? image 二. 引入外部JS文件 1....可以在src文件夹下新建一个js文件夹，然后将外部js脚本放在这个文件夹下，然后就可以在其他Vue组件中引入该js脚本。...3.在组件中使用import { 函数名 } from 外部脚本名来从外部js脚本中导入我们需要使用的函数。 import { Velocity } from '..

14.7K1 0

3D开发是一个生态，ThingJS支持js,css,json,html外部资源引用

从开发生态的角度，webGL技术可以调用显卡、调用麦克风、调用摄像头等一切能用的硬件去提升服务质量，同时也支持引用js脚本和css演示，让你的3D开发效果更加有特色。 **官方如何引入外部资源呢？...注意在平台新建或者上传文件仅允许js, css, html, json格式。...** 我们默认js脚本和css样式会带上时间戳，且按urls数组中的顺序加载，浏览器会缓存之前的js，css的版本，我们更新了js，css文件后，浏览器不会更新。...这样在平台上引用，开发不因为访问不到资源或者访问报错而拖延，所以我们支持css库，JS库打包并提供官方文件夹储存资源，确保稳定，也方便用户无论何时何地都可开发。...ThingJS官方平台支持外部资源，可操作js, css文件新建或者icon、jpg、png、gif、js、css、html、json、ttf、woff、gltf、rvt、ifc、mp3格式的文件上传。

1.5K2 0

js、css外部文件的相对路径问题

如果js、css外部文件有使用到相对路径时，需要注意其相对路径的基准是不一样的。...比如说，在index.html中引用到了外部的js和css文件，这两个文件都通过相对路径引用了某一张图片；这些文件所在的目录如下： 1 2 3 4 5 6 7 8 9 . ├── js | └──...index.js ├── css | └── index.css ├── images | └── bg.jpg └── index.html js文件的相对路径是以引用该js文件的页面为基准.../index.css" type="text/css"> Hello World!.../index.js"> 总结 js文件的相对路径是以引用该js文件的页面为基准 css文件的相对路径是以自身的位置为基准警告本文最后更新于 May

3.7K4 0

如何引用外部cdn资源

在使用vue-cli进行项目构建时,有时是需要引用外部cdn资源的,生产环境中可以直接在index.html的头部引用,但是编译时会报错,因为脚手架无法识别这个外部资源.下面以引用腾讯地图api为例,介绍如何正确引用外部...cdn资源. # 引用 js?...externals: { 'qq': 'qq' } } 1 2 3 4 5 6 复制 # 使用 import qq from 'qq' 1 复制说明:其实第一步的引入并不是唯一的办法,还可以通过js

2.1K1 0

html（css、js、html、web）文件引用路径写法【flask】

，js文件：比如文件路径：static/css/pintuer.css，路径如下： css/pintuer.css') }}"> 2、引用网上css、js文件如cdn加速资源常规路径 css" href="http...://apps.bdimg.com/libs/lightbox/2.6/css/lightbox.css"> 3、templates模板互相跳转 3.1路由在app中模板中只认可静态文件路径，还有路由...代码中对templates模板的引用路径：实际的路由以js文件中配置templates/404.html为例， //js { "title" : "css", "icon" : "...文件中对templates模板的引用参照4 6、js文件中对其他内嵌js文件的引用以layui内置为例，在index.js 引入 bodyTab.js bodyTab.js 项目路径：/static

3.9K3 0

Springboot引用外部配置文件

（上边的大写D好像可以不写的）后来想着直接把spring.config.location写到application.properties配置文件中，然后指定一个固定的外部配置文件来获取信息，这样启动的时候就可以不用加最后一行了...这里说了四种方式可以把配置文件放到外部的。...由于我们是要从外部读取文件，所以直接说前两种。

1K3 1

外部css文件调用

1 css" type="text/css"> 2 <a

2.6K4 0

CSS 思考 ☞『CSS in JS』 or 『JS in CSS』 ?

CSS in JS 前面写了一篇： CSS in JS = JSS , 这个库你知道吗？ - 掘金在评论里有人说：同时还发了一个沸点：你听说过 JSS 吗？...在 JS 中写 CSS，感觉有点奇葩。...JS in CSS 后来又了解到：除了 CSS in JS，还有一种方向是 JS in CSS；尤雨溪在 Vue3.2 提出，目的是：让我们可以在 css 中使用 js 变量。...JS 是把 CSS 写在 JSX 模板中； JS in CSS 是把 JS 变量写入 CSS 中；想想我们在 Vue2 中，想动态控制样式，我们通常这样： JS 还是 JS in CSS，总之都想整合 JS 和 CSS 的能力，梳理一个新的模板规范。

25.9K6 2

如何在vue组件中引入外部的css和js文件

在使用vue框架开发时，我们都知道一个组件中可以同时写HTML、css、js代码，只需三个标签而已，如下：但是要真把所有的代码都写入一个组件文件当中，那么代码量是非常大的...，极不便于修改和维护，这时就需要把css样式和js代码写到其他文件下，再引入组件当中。...具体方法如下：在组件中引入css文件： @import url(css文件路径) 在组件中引入js文件：首先需要将我们的js模块“抛出”，让其他文件能获取到...；如下， function home() { console.log("我是js文件") } export { home } 其次在需要导入的文件导入； .../assets/js/home.js"; 如图：版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。

8.8K2 0

外部css文件引入失效

好久没有写过前端代码了，有次引入bootstrap css文件在浏览器却没有获取到css文件，检查下文件路径没错，也不存在权限问题，后来仔细看了下自己引入css文件的link，发现少了东西。...以下是原来写的代码： css/bootstrap.min.css”> 这个没指定属性规定当前文档与被链接文档之间的关系，加上rel=”stylesheet”...stylesheet 文档的外部样式表。 start 集合中的第一个文档。 next 集合中的下一个文档。 prev 集合中的上一个文档。 contents 文档的目录。 index 文档的索引。

2.4K1 0

Java引用外部字体（路径引用）的一些坑

（后面你会发现更加反程序员）那么，只能把字体放到哦静态文件里面，然后引用外部字体了。...于是，只能引用外部字体。坑二前头说了，是otf文件，用正确的代码跑一下，很好一个报错都没有！（此处应有掌声！）...嗯，我只能说这个引用外部的otf在百度上，根本没有任何解决方法。甚至问这个问题的人，答案也是叫我们在操作系统安装，本地引用。然后，谷歌，stackflow。...大神直接fxxk了一下java的awt，大意就是java说支持引用otf，但是，不支持外部引用otf，最后说了一句awt写的就是一坨翔。...我那个纠结啊，也就是说外部引用，路径引用代码没错，而且看了源码，外部引用也就是路径引用。也就是说需求给的ttf有问题，反映一下问题，需求说你想要怎样的ttf呢？鬼子知道啊？我也想知道啊！

2.7K1 0

js如何引用js脚本

如何在 JavaScript 中引用 JS 脚本在 JavaScript 中引用外部 JS 脚本有两种主要方法：使用标签这是最简单的方法，通过在 HTML 页面中插入... 标签来引用 JS 脚本：其中 src 属性指定要引用的脚本文件的路径。...动态创建并插入元素： const script = document.createElement("script"); script.src = "script.js... 避免在同一页面中多次引用相同的脚本。使用异步或延迟加载来防止脚本阻塞页面加载。本文共 154 个字数,平均阅读时长 ≈ 1分钟

1041 0

Vue.js – 引入外部 JS 文件

一、外部文件 config.js 第一种写法： // 常量的定义 const config = { baseurl:'http://172.16.114.5:8088/MGT2' } // 函数的定义...//172.16.114.5:8088/MGT2' } // 函数的定义 export function formatXml(text) { 　　return text } 二、引入 config.js

41.4K3 1

使用express框架，如何在ejs文件中导入外部的js、css文件

在使用ejs模版的过程中遇到了这个问题：如何在ejs模版中导入外部的js、css文件。我猜测，ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。...我现在需要在index.ejs文件中导入public文件夹下的table.css以及table.js两个文件。我为什么要将两个静态文件放到public文件夹下呢？...那把包括了js、css以及图片的静态文件放到public文件夹下又该怎么使用呢？看图： ?...，这里有篇文章，写的很好app.use(express.static)方法详解这样，就可以在ejs文件中导入外部静态文件了。...如下： css" href="table.css"/> js

6.4K0 0

快速学习-Spring(引用外部属性文件)

IOC容器和Bean的配置 2.9 引用外部属性文件当bean的配置信息逐渐增多时，查找和修改一些bean的配置信息就变得愈加困难。...这时可以将一部分信息提取到bean配置文件的外部，以properties格式的属性文件保存起来，同时在bean的配置文件中引用properties属性文件中的内容，从而实现一部分属性值在发生变化时仅修改...jdbc:mysql:///test"/> 2.9.2 使用外部的属性文件

7512 0

CSS 字体图标引用

设计天赋的我只能去搜寻现有的icon了，大家可以去开源图标库中去搜寻自己想要的icon，将所选的icon加入到购物车当中，点击下载代码即可项目解压后，可以看到有三个 Demo 演示网页，分别对应font-class引用...，symbol引用，unicode引用，里面关于字体如何引用有着详细说明，在这里就不再复述 font-class 引用，因为本质上还是使用的字体，所以我们可以通过修改color属性来变化icon的颜色，...多色icon会自动失色 symbol 引用，使用的是svg，所以可支持多色icon，而单色icon也能通过修改color属性来变化icon的颜色 unicode 引用，跟font-class的引用基本一致

3.5K3 0

js 判断循环引用

(obj3)); console.log(isLoop(obj4)); console.log(isLoop(obj5)); console.log(isLoop(obj6)); 这里我看了JONS-js...typeof obj[key] === 'object') { if(cwm.has(obj[key])) { // 如果同层级的互相引用了...if(typeof obj[key] === 'object') { if(wm.has(obj[key])) { // 如果循环引用了

18.8K1 0

CSS in JS

每个组件包含了所有需要用到的代码，不依赖外部，组件之间没有耦合，很方便复用。所以，随着 React 的走红和组件模式深入人心，这种”关注点混合”的新写法逐渐成为主流。 ?...由于 CSS 的封装非常弱，导致了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS，意思就是使用 JS 语言写 CSS。...根据不完全统计，各种 CSS in JS 的库至少有47种。老实说，现在也看不出来，哪一个库会变成主流。 ?...5、上周，我看到一个新的 CSS in JS 库，叫做 polished.js。它将一些常用的 CSS 属性封装成函数，用起来非常方便，充分体现使用 JavaScript 语言写 CSS 的优势。...我觉得这个库很值得推荐，这篇文章的主要目的，就是想从这个库来看怎么使用 CSS in JS。首先，加载 polished.js。

6.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js引用外部css

1. 使用<link>标签（推荐）

2. 使用JavaScript动态创建<link>标签

3. 使用@import规则

4. 使用JavaScript直接修改样式

优势

应用场景

常见问题及解决方法

1. CSS文件未加载

2. 样式未生效

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1. 使用`<link>`标签（推荐）

2. 使用JavaScript动态创建`<link>`标签

3. 使用`@import`规则