我正在使用阻止我们编辑头部部分的 CMS。我需要将 css 样式表添加到站点，紧跟在标签之后。有没有办法用 JS 做到这一点，我可以在页面底部添加一个脚本（我可以在标签之前添加脚本），然后将样式表注入头部？
在正文中使用 javascript 将样式表添加到 Head
IT技术
javascript
css
2021-01-29 16:00:38
4个回答
更新：根据规范，link正文中不允许该元素。但是，大多数浏览器仍然可以很好地呈现它。因此，要回答评论中的问题 - 确实必须添加link到head页面的 ，而不是body.
function addCss(fileName) {
var head = document.head;
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = fileName;
head.appendChild(link);
}
addCss('{my-url}');
或者使用 jquery 更容易一点
function addCss(fileName) {
var link = $("<link />",{
rel: "stylesheet",
type: "text/css",
href: fileName
})
$('head').append(link);
}
addCss("{my-url}");
原答案：
您不一定需要将其添加到头部，只需将其添加到 body 标签的末尾即可。
$('body').append('<link rel="stylesheet" type="text/css" href="{url}">')
正如 Juan Mendes 提到的，您可以将样式表插入头部
$('head').append('<link rel="stylesheet" type="text/css" href="{url}">')
没有 jQuery 也是一样（见上面的代码）
这将以一种智能的方式做你想做的事。也使用纯JS。
function loadStyle(href, callback){
// avoid duplicates
for(var i = 0; i < document.styleSheets.length; i++){
if(document.styleSheets[i].href == href){
return;
}
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = href;
if (callback) { link.onload = function() { callback() } }
head.appendChild(link);
}
我修改Eddie的功能来删除或切换样式表或关闭。它还将返回样式表的当前状态。这很有用，例如，如果您想在您的网站上为视障用户设置一个切换按钮，并且需要将他们的偏好保存在 cookie 中。
function toggleStylesheet( href, onoff ){
var existingNode=0 //get existing stylesheet node if it already exists:
for(var i = 0; i < document.styleSheets.length; i++){
if( document.styleSheets[i].href && document.styleSheets[i].href.indexOf(href)>-1 ) existingNode = document.styleSheets[i].ownerNode
}
if(onoff == undefined) onoff = !existingNode //toggle on or off if undefined
if(onoff){ //TURN ON:
if(existingNode) return onoff //already exists so cancel now
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = href;
document.getElementsByTagName('head')[0].appendChild(link);
}else{ //TURN OFF:
if(existingNode) existingNode.parentNode.removeChild(existingNode)
}
return onoff
}
示例用法：
toggleStylesheet('myStyle.css') //toggle myStyle.css on or off
toggleStylesheet('myStyle.css',1) //add myStyle.css
toggleStylesheet('myStyle.css',0) //remove myStyle.css
您可以在现代浏览器中使用纯 JavaScript 并保持优雅。
const range = document.createRange()
const frag = range.createContextualFragment(`THE CONTENT IS THE SAME AS THE HTML.`)
document.querySelector("YOUR-NODE").append(frag)
添加任何 HTML 代码非常容易。
文档
示例 1
通过javascript在头部添加样式。
<head></head><body><button class="hover-danger">Hello World</button></body>
<script>
const range = document.createRange()
const frag = range.createContextualFragment(`
<style>
.hover-danger:hover{
background-color: red;
font-weight: 900
}
</style>
`
)
document.querySelector("head").append(frag)
</script>示例 2
导入 CSS、JS 并修改现有样式表。
<head></head>
<body><button class="btn btn-primary hover-danger">Hello world</button></body>
<script>
const range = document.createRange()
const frag = range.createContextualFragment(`
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"/>
`)
document.querySelector("head").append(frag)
window.onload = () => {
// 👇 If you don't want to import the new source, you can consider adding the data to exists source.
const nodeLink = document.querySelector(`link[href^="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"]`) // ^: match begin with my input
if (nodeLink) { // !== null
const stylesheet = nodeLink.sheet
const myCSS = `
background-color:red;
font-weight: 900;
`
stylesheet.insertRule(`.hover-danger:hover{ ${myCSS} }`, stylesheet.cssRules.length)
}
}
</script>📙你必须有权限直接修改CSS
如果您收到错误：
无法从“CSSStyleSheet”读取“cssRules”属性：无法访问规则，
那么你可以参考：https : //stackoverflow.com/a/49994161/9935654
其它你可能感兴趣的问题