#javascript #css #google-chrome
#javascript #css #google-chrome
Вопрос:
итак, если есть внешний css-файл, например:
<link rel='stylesheet' type='text/css' href='test.css'>
и мы хотим прочитать таблицу стилей с помощью javascript, мы можем сделать это следующим образом:
document.styleSheets[0].cssRules[0].cssText; (for example for first rule)
Это прекрасно работает в firefox, но то же самое утверждение выдает ошибку в Chrome, с чем-то вроде Type Error: "non_object_property_load" .
В чем может быть проблема и как мы можем прочитать таблицу стилей в Chrome?
Пожалуйста, взгляните на проблему, с которой я столкнулся:
http://s4.postimage.org/x5q0xt1vh/file.png
РЕДАКТИРОВАТЬ: Итак, проблема возникает, когда тестовый файл и связанный css размещаются локально в системе и не доступны через веб-сервер.
Комментарии:
1. Возможно, вам придется загрузить CSS с помощью AJAX-запроса.
2. Есть ли причина, по которой вы не просто ссылаетесь на css? Может быть, было бы проще просто создать страницу с правильными ссылками css в первую очередь?
3. Не могли бы вы привести живой пример? Вероятно, это связано с некоторыми специфическими различиями в том, как Chrome анализирует CSS, которые зависят от фактического анализируемого CSS.
4. > Blender, AJAX ничего не изменит, все, что я хочу, это прочитать CSS, который уже отображается DOM. > эван, я не понимаю, что ты хочешь сказать. @namoul, это просто. Я просто копирую эту команду в консоли javascript, при этом test.css связан со страницей, на которой я применяю эту команду, она работает в консоли firefox
Ответ №1:
Хорошо, я нашел проблему. Это действительно было связано с безопасностью, что работает, если внешний css находится в том же каталоге для firefox, но не работает для chrome.
Если файл css находится в другом каталоге или в сети, он также не будет работать в firefox.
Теперь, чтобы решить эту проблему, я запустил chrome с аргументами --allow-file-access-from-files , и теперь он работает отлично, как и должен.
Ответ №2:
http://www.quirksmode.org/dom/w3c_css.html — похоже, .cssText не поддерживается в Chrome
Комментарии:
1. На самом деле, конкретное использование, которое он приводит в примере (
document.styleSheets[0].cssRules[0].cssText) , поддерживается Chrome. Это третье по сравнению с первымcssTextиспользованием.2. Я думаю, что это как-то связано с безопасностью, поскольку изначально firefox также был исключением безопасности givie, но затем я переместил файл css в тот же каталог (размещенный локально на жестком диске), и он начал работать. Теперь, если я открываю пустую вкладку Chrome, это работает, но на любом веб-сайте или в моем локальном файле это не так. Есть ли какой-то флаг, который я должен установить в Chrome или что-то в этом роде??
Ответ №3:
Это работает в Chrome (как минимум 14):
document.styleSheets[0].cssRules[0].cssText
Это даст вам правило. В то время как это:
document.styleSheets[0].cssRules[0].cssText[0]
даст вам первую букву первого правила.
Комментарии:
1. на самом деле это странно, потому что я использую 14.0.835.202 chrome и все равно получаю ошибку типа с той же командой.
2. Так это не работает для вас? jsfiddle.net/Tetaxa/JKFAD/1 Это странно. Я получаю этот вывод:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }3. Нет, фактически я только что обновился до chrome 15, и теперь ошибка: TypeError: не удается прочитать свойство ‘0’ из null
4. Странно. Работает для меня в 15.0.874.106 m
5. это работает и для меня, но только для страниц, которые находятся на обслуживании, а не для локальных файлов, и я хочу сделать это для файлов на моем локальном жестком диске