29

ヘッドセクションの編集を妨げるCMSを使用しています。タグの直後に、cssスタイルシートをサイトに追加する必要があります。JSでこれを行う方法はありますか？ページの下部にスクリプトを追加して（タグの直前にスクリプトを追加するためのアクセス権があります）、スタイルシートをヘッドセクションに挿入できますか？

4

4 に答える 4

107

更新：仕様によると、link要素は本文で許可されていません。ただし、ほとんどのブラウザはそれでも問題なくレンダリングします。したがって、コメント内の質問に答えるには、実際にはページのにではなく、ページに追加linkする必要があります。headbody

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なしでも同じです（上記のコードを参照）

于 2012-08-06T18:23:35.757 に答える
20

これはあなたが望むことをインテリジェントな方法で行います。また、純粋な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);
}
于 2016-01-07T22:40:45.647 に答える
5

エディの機能を変更して、スタイルシートのオンとオフを切り替えたり削除したりしました。また、スタイルシートの現在の状態を返します。これは、たとえば、視覚障害のあるユーザーのためにWebサイトにトグルボタンを配置し、ユーザーの設定を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
于 2016-03-08T12:48:01.927 に答える
1

最新のブラウザでは、純粋な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

于 2021-07-02T08:20:48.070 に答える