Get document.styleSheets по имени вместо индекса?

Ответ 1

Используйте это, и имейте в виду:

По соображениям безопасности Opera и Mozilla не позволят вам получить доступ к коллекции cssRules таблицы стилей из другого домена или протокола. Попытка доступа к нему приведет к ошибке нарушения безопасности

setStyleRule = function(selector, rule, sheetName="myStyle") {
    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);
}

Ответ 2

Почему так сложно? Вы можете получить конкретную таблицу стилей документов по ID или URL-адресу без прокрутки всех таблиц стилей в документе: var mysheet = $('link#id')[0].sheet; ... или... var mysheet = $('link[href="/css/style.css"]')[0].sheet;

Ответ 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);
    }
  }
}

Как только вы получите объект DOM через document.getElementById, вы можете использовать свойство 'sheet' для доступа к фактической таблице стилей. Поэтому просто убедитесь, что вы указали идентификатор таблицы стилей, которую хотите изменить. Даже если это внешний файл CSS, просто дайте ему идентификатор.

И вот мой тестовый код:

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>

Ответ 4

Это произошло из-за того, что адрес CSS отличается от адреса страницы. Чтобы исправить это просто сделать, оба имеют некоторый адрес.