按名稱而不是索引獲取 document.styleSheets？

Question

document.styleSheets與索引一起使用，
但是如果我想在一個特定的 CSS 文件中使用stylesheet.insertRule呢？

我知道文件的名稱，它被注入到頁面中，並在某個時候通過 JS 注入。

Answer 1

使用它，並記住：

出於安全原因，Opera 和 Mozilla 不允許您訪問來自其他域或協議的樣式表的 cssRules 集合。 嘗試訪問它會引發安全違規錯誤

function setStyleRule (selector, rule, sheetName) {
    var sheets = document.styleSheets,
        stylesheet = sheets[(sheets.length - 1)];
    
    for( var i in document.styleSheets ){
        if( sheets[i].href && sheets[i].href.indexOf(sheetName + ".css") > -1 ) {
            stylesheet = sheets[i];
            break;
        }
    }
    
    if( stylesheet.addRule )
        stylesheet.addRule(selector, rule);

    else if( stylesheet.insertRule )
        stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}

---

更新 - 更短的代碼：

function getSetStyleRule(sheetName, selector, rule) {
    var stylesheet = document.querySelector('link[href*=' + sheetName + ']')

    if( stylesheet ){
        stylesheet = stylesheet.sheet
        stylesheet.insertRule(selector + '{ ' + rule + '}', stylesheet.cssRules.length)
    }

    return stylesheet
}

// Usage example
getSetStyleRule('main', 'body', 'background:red')

Answer 2

為什么這么復雜？ 您可以通過 ID 或 URL 獲取特定的文檔樣式表，而無需遍歷文檔中的所有樣式表： var mysheet = $('link#id')[0].sheet; ... 或 ... var mysheet = $('link[href="/css/style.css"]')[0].sheet;

Answer 3

這是 vsync 對答案的小幅調整。

function addRule(stylesheetId, selector, rule) {
  var stylesheet = document.getElementById(stylesheetId);

  if (stylesheet) {
    stylesheet = stylesheet.sheet;

    if (stylesheet.addRule) {
      stylesheet.addRule(selector, rule);
    } else if (stylesheet.insertRule) {
      stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
    }
  }
}

通過 document.getElementById 獲得 DOM 對象后，您可以使用“sheet”屬性來訪問實際的樣式表。 因此，只需確保為要更改的樣式表提供 ID。 即使是外部CSS文件，也只要給它一個ID即可。

這是我的測試代碼：

 var index = 0; var items = [ { selector: "h1", rules: "color:#3333BB;font: bold 18px Tahoma;padding: 12px 0 0 0;" }, { selector: "p", rules: "padding:0;margin:0;background-color:#123456;color:#ABCDEF;"}, { selector: "b", rules: "font-weight:normal;"}, { selector: "i", rules: "color:#66FF66;" } ]; function addRule(stylesheetId, selector, rule) { var stylesheet = document.getElementById(stylesheetId); if (stylesheet) { stylesheet = stylesheet.sheet; if (stylesheet.addRule) { stylesheet.addRule(selector, rule); } else if (stylesheet.insertRule) { stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); } } } $(document).ready(function () { $("button").click(function () { addRule("myStyles", items[index].selector, items[index].rules); index++; }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style id="myStyles"> div { border: solid 1px black; width: 300px; height: 300px; } </style> <button>Click Me 4 times slowly</button> <div> <h1>test</h1> <p>Paragraph One</p> <p>Paragraph with <b>bold</b> and <i>Italics</i></p> <p>Paragraph 3</p> </div>

Answer 4

沒有jQuery：

 function addRule(stylename, selector, rule) { var stylesheet = document.querySelector(`link[href$="${stylename}.css"]`) if( stylesheet.addRule ) stylesheet.addRule(selector, rule); else if( stylesheet.insertRule ) stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); } // example use addRule('styles.css', '.color', 'red')

Answer 5

發生這種情況是因為 CSS 的地址與頁面的地址不同。 修復只是讓兩者都有一些地址。