Получение всех css, используемых в html файле

Мне нужно получить все стили CSS, используемые в HTML файле, используя JavaScript.


Если приведенный выше код является моим HTML, я должен написать одну функцию JavaScript внутри головы, которая возвращает строку, подобную этой.

body {
 border: 1px solid silver;
}
.mydiv {
 color: blue;
}

Можно ли это сделать?

3 ответа

Для встроенных таблиц стилей вы можете получить содержимое из обычного DOM как с любым другим элементом:

document.getElementsByTagName('style')[0].firstChild.data

Для внешних, link ed stylesheets это более проблематично. В современных браузерах вы можете получить текст каждого правила (включая встроенные, связанные и @imported таблицы стилей) из свойства document.styleSheets[].cssRules[].cssText.

К сожалению, IE не реализует этот DOM Level 2 Style/CSS, вместо этого используя свою собственную тонкую другую версию интерфейсов StyleSheet и CSSRule. Таким образом, вам нужен какой-нибудь код для проверки и удаления, чтобы воссоздать правила в IE, и текст может быть не таким же, как оригинал. (В частности, IE будет ALL-CAPS ваши имена свойств и потерять пробелы.)

var css= [];
for (var sheeti= 0; sheeti


Здесь мое решение:

var css = [];
for (var i=0; i
<p>В конце концов, <code>cssInline представляет собой текстовый список всех сталей страницы и их содержимого.

Пример:

/* Stylesheet : http://example.com/cache/css/javascript.css */
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
.javascript { color: rgb(172, 172, 172); }
.javascript .imp { font-weight: bold; color: red; }
/* Stylesheet : http://example.com/i/main_master.css */
html { }
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
a { color: rgb(204, 0, 51); text-decoration: none; }
a:hover { color: rgb(153, 153, 153); text-decoration: none; }
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
#header a { color: rgb(255, 255, 255); }
#menu_2 { height: 290px; }
/* Stylesheet : [inline styles] */
.hidden { display: none; }


Вот мое решение:

function getallcss() {
 var css = "", //variable to hold all the css that we extract
 styletags = document.getElementsByTagName("style");
 //loop over all the style tags
 for(var i = 0; i < styletags.length; i++)
 {
 css += styletags[i].innerHTML; //extract the css in the current style tag
 }
 var currentsheet = false;//initialise a variable to hold a reference to the stylesheet we are currently extracting from
 //loop over all the external stylesheets
 for(var i = 0; i < document.styleSheets.lenngth; i++)
 {
 currentsheet = document.styleSheets[i];
 //loop over all the styling rules in this external stylesheet
 for(var e = 0; e , currentsheet.cssRules.length; e++)
 {
 css += currentsheet.cssRules[e].cssText; //extract all the styling rules
 }
 }
 return css;
}

Он основан на ответе @bobince.

Он извлекает все css как из тегов стиля, так и из внешних таблиц стилей.

licensed under cc by-sa 3.0 with attribution.