在<head>中动态添加链接样式表
在<head>中动态添加链接样式表是一种在网页中动态引入外部样式表的方法。这种方法可以让你在不同的情况下，根据需要动态地引入不同的样式表，从而实现不同的样式效果。
以下是一个简单的示例代码，展示了如何在<head>中动态添加链接样式表：
function addStylesheet(url) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.head.appendChild(link);
}
// 使用示例
addStylesheet('https://example.com/styles.css');在这个示例中，我们定义了一个名为addStylesheet的函数，它接受一个参数url，表示要引入的样式表的URL地址。在函数内部，我们创建了一个<link>元素，并设置了它的rel属性为stylesheet，type属性为text/css，以及href属性为传入的url参数。最后，我们将这个<link>元素添加到<head>元素中，从而实现动态引入样式表的目的。
需要注意的是，动态引入样式表需要谨慎使用，因为它可能会导致页面样式出现问题，或者引入不安全的样式表。因此，在使用这种方法时，需要确保引入的样式表来源可靠，并且经过安全检查。
相关·内容
2回答
我有一个不寻常的场景，我需要从STYLE标签(只有第二个标记)的内容中获取内容，并将其添加到HTML DOCUMENT B的LINK标记之后的HEAD标记中。A和B在同一台服务器上。它必须是动态的，我无法控制所生成的CSS (cms)。
我想知道：
什么是最好的方法，我需要避免页面闪烁。
比较便宜的是什么？
我可以使用HTML5和JQUERY。我的目标主要是网络工具包。
HTML A
<html>
<head>
<style type="text/css">
.
浏览 4提问于2013-11-14得票数 0
3回答
动态加载样式表
、、
我知道你可以把样式表放在页面的头上，但我喜欢把它们放在一个单独的文件中。现在我正在处理一个页面应用程序。
在SPA中，内容是动态的，对吗？所以我不想用链接标签导入head部分的所有样式表。当我需要的时候，我能以某种方式导入样式表吗？
我的意思是，我是否可以在正文中有一个链接，这样，每当我的SPA加载一些动态内容时，样式表也会被加载？这样，即使动态内容没有加载，我也不必加载所有样式表。
我再次强调:当内容加载时，样式加载.。
我知道我可以用这样的内联风格来做这件事：
~PSEUDO CODE
<tagname style="somestyle"></tagna
浏览 3提问于2013-08-29得票数 9
回答已采纳
1回答
在rails项目中动态插入样式表
、、、、
我为自己建立了一个为学校开发的CMS的实时主题选取器。CMS是使用Ruby on Rails构建的，而我(个人)没有任何使用Ruby on Rails的经验(其他人在做后端工作，我是前台人员)。
现在我想要我的主题选择器，它是用javascript (主干、下划线和jQuery)编写的，可以与Rails一起工作，但我找不到在Rails中包含样式表的正确方法。目前我给出了一个静态路径：
// Insert a new stylesheet
var stylesheet = $("<link />", {
href: "stylesheets/theme
浏览 0提问于2012-12-05得票数 0
头
<head>
<meta charset="UTF-8"/>
<title>abc</title>
<script type='text/javascript' src='/js/jquery-min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type='text/javas
浏览 0提问于2013-04-09得票数 0
3回答
头部环节和样式元素的评价顺序
、、、、
在我看来，所有现代浏览器，包括最新版本的Chrome、Safari和FireFox (可能从一开始)都尊重style和link元素在head中的顺序；即使是在使用JavaScript动态创建和添加时也是如此。
例如，在这里，red.css和green.css都指定了主体背景颜色；第一个设置主体背景红色，第二个设置它为绿色：
<head>
<!-- other code -->
<link rel="stylesheet" href="red.css" type="text/css">
&
浏览 3提问于2012-09-03得票数 4
1回答
我正在开发一个基于web的应用程序，使用引导程序。
我正在尝试将.aspx页面保存到我的应用程序中的html文件中。
这里是我的代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using iTextSharp.text;
using iTextSharp.text.html.simpleparser;
using iTextS
浏览 2提问于2014-12-19得票数 0
回答已采纳
我通过JavaScript动态地将一些样式表加载到我的应用程序中。在这个样式表中，我有不同的CSS变量，我想从我的JS中读/写这些变量。
直接嵌入到head标记中的样式表将被正确处理。CSS变量由CSS计算，在JS中可见。
在运行时动态加载的样式表确实有一些奇怪的错误。CSS变量由CSS计算，但在JS中不可见。
有人有线索吗？
具有最小错误演示的柱塞：
方法用于动态加载CSS：
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet
浏览 6提问于2017-07-21得票数 0
回答已采纳
3回答
我动态加载一个css样式表(在jQuery的帮助下)，如下所示：
var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
.attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
.appendTo(head);
这在Firefox和Google Chrome中运行良好，但在IE中就不行了。
有什么
浏览 46提问于2009-07-26得票数 73
回答已采纳
下面的html文档(连同CSS)无法在b.css中呈现样式。
<!doctype html>
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="A" href="a.css" />
<link rel="stylesheet" media="screen" type="text/css
浏览 1提问于2009-12-25得票数 13
回答已采纳
我有一个对服务器端JS文件的引用，该文件在我的页面上动态创建div。我正在尝试覆盖为所创建的div内联的css，但我无法做到这一点。
我已经尝试过了！重要的是，JS创建的风格仍然胜过我所做的一切。
当我在chrome的开发人员控制台中查看样式时，它显示element.style是“赢得”我的样式的样式，我没有在服务器上编辑JS文件的权限。
我把它放在我的页面中，它会动态地创建div并设置它们的样式。
<head>
<style>
#id
{
background-color: blue; !important;
display:block; !im
浏览 2提问于2014-08-27得票数 0
使用Docutils的rst2html.py，是否可以在head：<head>...<link rel=stylesheet href="friendly+dinosaur.css" />...</head>中包含到样式表的链接
因此，澄清一下，我对生成<style>...{{ contents on friendly+dinosaur.css }}...</style>或使用@import并不感兴趣。
我注意到了--link-stylesheet，尽管它不需要参数，而只是添加了对html4css1.css的引用。--
浏览 3提问于2015-07-05得票数 3
回答已采纳
3回答
我是一个新的网页设计专业的学生，我刚刚学习了层叠样式表以及如何将它们连接到外部；然而，我遇到了一个问题。我的<head>中链接的文件没有问题，文件目录也是正确的，但是我的更改没有显示出来。如果我有一个<style>标记或属性，那么我的CSS就能工作，而不是来自外部文件。有什么帮助吗？
<!DOCTYPE html>
<html>
<head>
<title>Protein Structures</title>
<link href="styles/main.css">
</he
浏览 0提问于2013-11-09得票数 5
回答已采纳
我有一个角12的应用程序，我试图与LTR和RTL语言(例如英语和阿拉伯语)一起工作，这些语言可以由最终用户在使用应用程序时选择和应用。引导(我用于UI样式)要求我在HTML元素上设置dir属性，并在要显示阿拉伯文本时从原始的LTR文件中引用一个单独的RTL文件。
我想我可以像这样设置我的index.html：
<app-root></app-root>
然后让我的app-component.html生成HTML、HEAD、LINK和BODY等元素，如下所示：
<!doctype html>
<html [lang]="lang" [di
浏览 12提问于2022-01-27得票数 0
2回答
我使用javascript创建了一个iframe，将其添加到父DOM中，然后通过iFrameEl.contentWindow.document.write()将HTML语言写入其中。
在调用iFrameEl.contentWindow.document.closed()之后，我需要确定何时呈现iFrame中的所有内容。
iframe的onload事件似乎是在最初将iFrame添加到DOM时调用的，然后我才能写入它，并且需要将它添加到DOM以便访问iFrame的contentWindow.document，所以第22条。
在Chrome中，作为替代，我使用srcdoc属性将我需要的所有内容添加到
浏览 3提问于2016-11-03得票数 1
8回答
我正在尝试使用外部.css页面创建动态页面，其中页面颜色将发生更改。下面是我的代码。但是当我单击href时，我没有得到任何输出。有人能告诉我我的代码有什么问题吗？
<script language="JavaScript">
function loadjscssfile(filename, filetype)
{
if (filetype=="css")
{
var fileref=document.createElement("link")
fileref.setAttribute(
浏览 2提问于2010-01-20得票数 14
1回答
我正在尝试集成rails 4.2.1应用程序上的引导模板。当我在浏览器的开发者工具上检查某些元素以查看它的css文件和行号时，它应该显示css文件和行号，如下所示：
相反，它显示的内容如下所示：
我检查了这个问题，发现它生成了额外的三个样式标签，如下所示：
这是我的application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="
浏览 1提问于2015-07-16得票数 4
我正在动态地创建如下所示的样式，并将其附加到<head>中
$("<style type='text/css'> .HP{ background-color: "Red "} </style>").appendTo("head");
在页面上，我想删除一个特定的css类，然后用不同的值重新添加。如何在JQuery中做到这一点。
浏览 4提问于2014-10-10得票数 7
回答已采纳
1回答
动态添加样式表
、、
在触发document.ready事件之后，我根据用户的解析动态加载样式表。这就是Chrome，Firefox和IE的工作原理：
var TheFileName = '/SomeDirectory/SomeFileName.css';
if (document.createStyleSheet) {
//finally found something IE got right
document.createStyleSheet(TheFileName);
} else {
$('<style id="TestCSS"
浏览 0提问于2014-09-10得票数 3
回答已采纳
我尝试在HTML页面中添加样式链接并插入规则
let linklength = document.head.querySelectorAll("link[rel=stylesheet]").length;
let style = document.createElement("link");
style.setAttribute("rel", "stylesheet");
style.setAttribute("type", "text/css");
style.setAttribute("
浏览 1提问于2020-07-31得票数 1
回答已采纳
1回答
我一直在做一个新的MVC3项目，我想在其中引入动态主题的概念。
我不想创建一堆.css文件并动态链接到正确的文件，而是希望使用主<head>部分中的<style>部分，该部分指定用于选择器及其属性的值。
这些值将从数据库中提取并写入样式中的header部分，如下所示：
<head>
<style type="text/css">
.testClass { color:Purple;background-color:LightGreen; }
</style>
</head>
浏览 0提问于2011-04-11得票数 1
2回答
我想从类中读取样式，并且样式在外部样式表中定义。另外，我将动态地添加外部工作表。
如果它位于同一个html文件中，如果它是在标记中定义的，我可以访问它。
function getStyle(className) {
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
debugger;
var styles="";
for (var x = 0; x < classes.length; x++
浏览 2提问于2015-05-19得票数 0
回答已采纳
2回答
我想在head标记中附加css样式表，但被附加到body标记中。这是我所做的:我有一个控制器'countries‘，带有action 'index’，我的视图是index.phtml
index.phtml包含：
<?php
$this->headLink()->appendStylesheet($this->baseUrl().'/js/dojo-1.7/dojo/resources/dojo.css')
->appendStylesheet($this->baseUrl().'/js/d
浏览 3提问于2012-06-29得票数 0
回答已采纳
2回答
我试图让一些html和外部js文件协同工作，允许用户在我的主页底部点击一个按钮就可以切换样式表，由于某些原因，它将无法工作。
js文件：
function setActiveStyleSheet( title ) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAt
浏览 4提问于2013-08-15得票数 1
回答已采纳
是否可以动态更改全局样式表？
编辑:其目的是允许用户选择他喜欢的样式。
在Angular 1中，我能够在head标签周围包装一个控制器，并在其中使用绑定。
示例如下(简化代码)：
index.html
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppController">
<head>
<title>Title</title>
<link rel="stylesheet" ng-href="styl
浏览 0提问于2016-06-09得票数 13
回答已采纳
4回答
所以我有这个PHP网站，我正在使用模板工作。任何页面都分为三个部分:页眉、内容和页脚。每个零件都由一个.php文件表示。
标题：
<html>
<head><link_to_some_css /></head>
<body>
<div id="menuBar">
xxx
</div>
内容：
<?php include("header.php") ?>
<div id="someHTMLContent">xxx</di
浏览 0提问于2012-02-03得票数 0
回答已采纳
1回答
我用vanilla js和css创建了一个库，但是当我导入js和css时，它只起作用，我想使用的只是导入文件js。
现在我正以这样的方式进口：
<head>
<script src="../lib.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
但只有这样才有可能？
<head>
<script src="../lib.js"></scri
浏览 0提问于2021-01-22得票数 0
回答已采纳
它是HTML中的一段代码。问题是我不知道这行的使用和工作是什么。
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
浏览 10提问于2015-04-27得票数 0
回答已采纳
我尝试在django模板中使用twitter bootstrap的导航栏。我在"base.html“的头部添加了以下内容。
<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">
页面在chrome中看起来是正确的。但是当我切换到IE8时，CSS就乱七八糟了。“容器”不再居中，导航栏看起来不正确。
然后我试着摆脱姜戈。我将bootstrap.css移到base.html文件夹中，并将css加载更改为：
<link href="boots
浏览 3提问于2012-05-02得票数 0
1回答
我在CodePen上有免费帐户。在我的代码中，我使用Bootstrap，但我也覆盖了CodePen CSS编辑器中的一些引导类。在HTML的head标记中，我定义了加载顺序：
link rel="stylesheet" type="text/css" href="bootstrap.min.css" <br>
link rel="stylesheet" type="text/css" href="custom.css"
也就是说，我的custom.css必须重写Bootstrap类。但是
浏览 3提问于2022-10-24得票数 0
回答已采纳
2回答
我使用“皮肤”方法将css加载到我的站点。
：layout.phtml:
<head>
<?php
print $this->headTitle();
print $this->headScript();
$this->loadSkin($this->skin);
print $this->headLink();
print $this->jQuery();
print $this->layout()->customJS;
?>
</head>
其中
浏览 5提问于2012-01-05得票数 0
回答已采纳
如果将title属性添加到<link>页面的<head>中的样式表<link>标记中，是否有人能详细描述<head>属性的用途？今天在玩一些HTML时，当<link>对多个样式表进行处理时，我注意到我似乎在title属性的<link>中被误用了。
这是我的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- styles -->
浏览 3提问于2015-12-13得票数 3
回答已采纳
这是一个错误：
Type '{ children: Element[]; style: { backgroundColor: string; }; }' is not assignable to type 'IntrinsicAttributes & { children: ReactNode; }'.
Property 'style' does not exist on type 'IntrinsicAttributes & { children: ReactNode; }'.ts(2322)
这是密码
im
浏览 5提问于2022-11-09得票数 0
我正在使用Sinatra，并且我一直在尝试加载一些样式表。我已经在我的erb中尝试了普通的html link标签，但是没有起作用。
我试过了
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
这不是我正在使用的url的问题，有什么特殊的方法可以实现这一点吗？
浏览 3提问于2012-09-09得票数 10
回答已采纳
1回答
我已经下载了Fontawesome (包括css，减少和其他支持文件)，并将这些文件复制到我的网站上。
我用的是龙门框架。它说要编辑Head节以添加自定义代码。
我需要两件事的帮助，
如何编辑head标签
如何将fontawesome.css文件输入到我的页面，以便它开始在我的页面上显示图标。
浏览 1提问于2015-05-17得票数 0
我想在我的博客中使用typekit网站上的字体。我现在使用的是将javascript放在head标签上，并使用typekit中的启动工具包选项加载字体。
我的问题是，typekit允许使用@font-face在CSS中添加字体吗？
浏览 1提问于2011-12-21得票数 1
2回答
今天，我试着使用Google PageSpeed查看我的网站，其中的建议是：“在上面的内容中消除渲染阻塞CSS”。据我所知，最好包括页面顶部的所有CSS (例如在标记中)，然后在页面后面为其他内容包括样式。在这个建议的文档中，这个示例构造是：
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world
浏览 0提问于2017-01-25得票数 1
1回答
我有一个链接的css文件用于默认属性，另一个用于当wiewport被更改时它发生变化的消息。在JS脚本的末尾，我在全局值offsetWidth中插入了一个元素的NavW。因此，JS似乎返回了错误的值，它不只是在dom中计算，而是基于第一个默认的css属性而不是新的属性。但是，目标元素正确呈现。注意，条件中的值'2‘是因为有一个Link元素，它不是css文件，而是一个图标。
function switchTheme(newHref)
{
var newIndex;
newIndex = document.getElementsByTagN
浏览 6提问于2014-07-24得票数 2
回答已采纳
我有一个静态站点，在那里我使用Vue和Webpack。
我在一个名为style.css的文件中有一些全局CSS规则，我正在使用import './styles.css'从我的index.js文件中导入它们。此外，我有一些.vue文件，它们生成自己的CSS。
为了生成超文本标记语言页面，我使用了html-webpack-plugin。
我的CSS规则似乎应用正确。然而，包含它们的<style>标签是通过Webpack生成的Javascript动态添加到我的页面的<head>中的。我更希望在生成的index.html文件中静态地显示这些<style&g
浏览 2提问于2018-06-09得票数 9
回答已采纳
我有一个包含html元素的jsp文件，里面有一个带有特定id的表。当我在内部添加边框: 1px；样式时，它就可以工作了，但是当我想要使用指定样式的css文件时，它就没有了，结果就是根本没有边框。
jsp文件的相关部分：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Airline Database</title>
<link rel="stylesheet&#
浏览 4提问于2013-07-11得票数 0
回答已采纳
2回答
在过去的几天里，我一直在尝试解决这个问题的几个答案、建议和教程，但不幸的是，它们中没有一个起到了作用。
最近的一个例子是：
但是它使用的是"extractCss“，自从这篇文章发表以来，人们就不再推荐它了。
根据该条：
"styles.js“文件应该消失在检查器>网络> JS中
单击该按钮应在检查器>网络> css中添加CSS文件
但这两种情况目前都没有发生。
app.component.ts
const head = this.document.getElementsByTagName('head')[0];
浏览 5提问于2022-08-28得票数 0
回答已采纳
2回答
一个web页面在客户端运行，页面中有div，它通过ajax fn()动态地更改它是innerHTML，但是我对没有运行的jQuery fn()有异议。
假设这是正在运行的网页
<html> <head>
<script type="text/javascript" src="jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="jquery-ui.min.1.8.11.js"> <
浏览 2提问于2011-12-06得票数 0
1回答
我一直在研究流星应用程序。现在，如果我在主页上的主要内容是动态的，那就太好了。我有个密码：
main.html
<head>
<title>Taskmanager</title>
</head>
<body>
{{> navBar}}
{{> mainlayout}}
</body>
mainlayout.html
<template name="mainlayout">
<main>
{{> Template.dynamic template=main}}
&
浏览 3提问于2017-08-03得票数 0
因此，在HTML的<head></head>块中，我有以下内容
<link rel="canonical" href="/page3.html" />
<link rel="prev" href="/page2.html" />
<link rel="next" href="/page4.html" />
如果它包含站点的域名和HTTP/HTTPS值，那么它应该是这样的，或者搜索引擎应该足够聪明，知道它们要去哪里。
<link rel
浏览 0提问于2017-10-07得票数 0
回答已采纳
因此，我正在阅读一本名为<<teach yourself CSS and HTML in 24 hours>>的书，当涉及到CSS时，这本书要求读者在一个单独的.css文件中编辑样式表，并将一个链接放在html文件中以链接到.css文件。是我干的，但不管用。
然后我在youtube上看了一段视频，其中说我可以简单地在我的html文件中添加一个<style>标签来使css工作，我就成功了。
问题是，我想用这本书教我的方式来做这件事，因为我认为这会使我的文件更容易阅读，这是为了我自己。
这是我的html代码
<!DOCTYPE html PUBLIC &#
浏览 4提问于2016-06-24得票数 1
回答已采纳
到目前为止，我只能通过将该CSS文件包含在<body>标记中，从相应的视图文件中加载特定操作的CSS文件。但是，当调用特定的操作时，我想将该CSS文件包含在<head>标记中吗？
浏览 3提问于2016-05-26得票数 1
回答已采纳
5回答
由于某些原因，我不能把我的头围绕在CSS和HTML上。我正试图在母版页中为HTML获取一个要显示的图像。我使用的是Visual，它们在不同的文件中。
HTML：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
浏览 11提问于2016-10-31得票数 1
回答已采纳
在我的项目中，我一直在使用来执行动态样式。这在很大程度上起了很大的作用，但我想做一些似乎没有帮助的事情。
我希望能够首先创建一组主样式规则，然后创建一组默认样式规则，如果它们相互冲突，可以被主样式规则覆盖。示例：
<div class="mainClass1 defaultClass1">text</div>
<script>
jss.set('.mainClass1', {
color: 'red'
})
jss.set('.defaultClass1', {
color: '
浏览 4提问于2015-02-23得票数 0
回答已采纳
我有一个简单的HTML5页面：
<!DOCTYPE html>
<html>
<head>
<title>trial</title>
</head>
<body>
<p>
<a href="500.jpg" media="screen and (max-width:500px)">here is a link</a>
<a href="1000.jpg" media
浏览 3提问于2014-10-12得票数 0
我想添加css到头部标签，它应该反映的页面，就像我在我的页面上，当用户在这个文本框中添加背景图像url时，我在我的页面上添加背景图像url，css是在头部标签中创建的身体背景。body标签的css已成功添加到head标签的开头，但对页面背景没有影响:(.
问题是我可以在head标签的末尾添加css吗？它会改变我的身体背景吗？
我正在使用jquery执行此操作，请帮助
浏览 0提问于2009-03-10得票数 1
回答已采纳
这里，我有两个文件index.php和pop_map.php。我使用bootstrap创建了index.php文件，当我控制它时，它工作得很好，但当我试图从pop_map.php文件调用它时，我在其中包含了index.php文件，在标题和导航栏之间有一个间隙，下拉按钮不起作用。请帮帮我！
index.php文件
<html>
<head>
<title>Visualization</title>
<meta name = "viewport" content="width=device-width,
浏览 1提问于2014-07-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
