Javascript 从chrome开发者工具控制台获取CSS类定义
我想通过编程从chrome开发者工具中检索一组CSS类定义。实际上与右侧的“样式”选项卡中显示的内容类似。输入需要是类名,输出应该是其中定义的所有样式Javascript 从chrome开发者工具控制台获取CSS类定义,javascript,css,google-chrome-devtools,Javascript,Css,Google Chrome Devtools,我想通过编程从chrome开发者工具中检索一组CSS类定义。实际上与右侧的“样式”选项卡中显示的内容类似。输入需要是类名,输出应该是其中定义的所有样式 我知道getComputedStyle DOM方法,但它并没有划分为我需要的单独类。Python脚本在css文件中搜索找到的单词,请阅读花括号之间的内容。快速肮脏的方法**这种方法对我很有效(): 并得到如下结果: console.log(getStyle('#heder_logo a')); > #heder_logo a { wid
我知道getComputedStyle DOM方法,但它并没有划分为我需要的单独类。Python脚本在css文件中搜索找到的单词,请阅读花括号之间的内容。快速肮脏的方法**这种方法对我很有效(): 并得到如下结果:
console.log(getStyle('#heder_logo a'));
> #heder_logo a { width: 200px; height: 114px; display: block; }.
我确实对一些不在同一个域上的CSS文件有问题(它们是从CDN中提取的),但该线程中有各种各样的建议,因此有些应该适合您。已经修改了Ivan的答案,以获得更完整的结果。此方法还将返回类作为选择器一部分的样式
//Get all styles where the provided class is involved
//Input parameters should be css selector such as .myClass or #m
//returned as an array of tuples {selectorText:"", styleDefinition:""}
function getStyleWithCSSSelector(cssSelector) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
var arStylesWithCSSSelector = [];
//in order to not find class which has the current name as prefix
var arValidCharsAfterCssSelector = [" ", ".", ",", "#",">","+",":","["];
//loop through all the stylessheets in the bor
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
//check for any reference to the class in the selector string
if(typeof classes[x].selectorText != "undefined"){
var matchClass = false;
if(classes[x].selectorText === cssSelector){//exact match
matchClass=true;
}else {//check for it as part of the selector string
//TODO: Optimize with regexp
for (var j=0;j<arValidCharsAfterCssSelector.length; j++){
var cssSelectorWithNextChar = cssSelector+ arValidCharsAfterCssSelector[j];
if(classes[x].selectorText.indexOf(cssSelectorWithNextChar)!=-1){
matchClass=true;
//break out of for-loop
break;
}
}
}
if(matchClass === true){
//console.log("Found "+ cssSelectorWithNextChar + " in css class definition " + classes[x].selectorText);
var styleDefinition;
if(classes[x].cssText){
styleDefinition = classes[x].cssText;
} else {
styleDefinition = classes[x].style.cssText;
}
if(styleDefinition.indexOf(classes[x].selectorText) == -1){
styleDefinition = classes[x].selectorText + "{" + styleDefinition + "}";
}
arStylesWithCSSSelector.push({"selectorText":classes[x].selectorText, "styleDefinition":styleDefinition});
}
}
}
}
if(arStylesWithCSSSelector.length==0) {
return null;
}else {
return arStylesWithCSSSelector;
}
}
//获取所提供类涉及的所有样式
//输入参数应该是css选择器,如.myClass或#m
//作为元组数组{selectorText:,styleDefinition:}返回
函数getStyleWithCSSSelector(cssSelector){
var styleSheets=window.document.styleSheets;
var styleSheetsLength=styleSheets.length;
var arStylesWithCSSSelector=[];
//为了不找到以当前名称为前缀的类
变量arValidCharsAfterCssSelector=[“”、“、”、“、”、“#”、“>”、“+”、“:”、“[”;
//循环浏览bor中的所有样式表
对于(var i=0;i 对于(var j=0;jThanks,但css类可能定义在多个不同的文件中,我可能无法在文件系统上访问这些文件(而且我并不真的想通过http获取文件并进行搜索),这种方法对我很有效:,它允许您在Chrome控制台中调用JS代码,如下所示:console.log(getStyle('heder_logo a'))
并得到如下结果:#heder_logo a{宽度:200px;高度:114px;显示:block;}
。我确实遇到了一些不在同一域中的CSS文件问题(它们是从CDN中提取的),但是那里有各种各样的建议,所以有些应该适合你。谢谢,这看起来很有希望。你想添加这个作为答案,我将其标记为正确的答案?很高兴听到这一点,我添加了答案。
//Get all styles where the provided class is involved
//Input parameters should be css selector such as .myClass or #m
//returned as an array of tuples {selectorText:"", styleDefinition:""}
function getStyleWithCSSSelector(cssSelector) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
var arStylesWithCSSSelector = [];
//in order to not find class which has the current name as prefix
var arValidCharsAfterCssSelector = [" ", ".", ",", "#",">","+",":","["];
//loop through all the stylessheets in the bor
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
//check for any reference to the class in the selector string
if(typeof classes[x].selectorText != "undefined"){
var matchClass = false;
if(classes[x].selectorText === cssSelector){//exact match
matchClass=true;
}else {//check for it as part of the selector string
//TODO: Optimize with regexp
for (var j=0;j<arValidCharsAfterCssSelector.length; j++){
var cssSelectorWithNextChar = cssSelector+ arValidCharsAfterCssSelector[j];
if(classes[x].selectorText.indexOf(cssSelectorWithNextChar)!=-1){
matchClass=true;
//break out of for-loop
break;
}
}
}
if(matchClass === true){
//console.log("Found "+ cssSelectorWithNextChar + " in css class definition " + classes[x].selectorText);
var styleDefinition;
if(classes[x].cssText){
styleDefinition = classes[x].cssText;
} else {
styleDefinition = classes[x].style.cssText;
}
if(styleDefinition.indexOf(classes[x].selectorText) == -1){
styleDefinition = classes[x].selectorText + "{" + styleDefinition + "}";
}
arStylesWithCSSSelector.push({"selectorText":classes[x].selectorText, "styleDefinition":styleDefinition});
}
}
}
}
if(arStylesWithCSSSelector.length==0) {
return null;
}else {
return arStylesWithCSSSelector;
}
}
function getAllCSSClassDefinitionsForSubtree(selectorOfRootElement){
//stack in which elements are pushed and poped from
var arStackElements = [];
//dictionary for checking already added css class definitions
var existingClassDefinitions = {}
//use jquery for selecting root element
var rootElement = $(selectorOfRootElement)[0];
//string with the complete CSS output
var cssString = "";
console.log("Fetching all classes used in sub tree of " +selectorOfRootElement);
arStackElements.push(rootElement);
var currentElement;
while(currentElement = arStackElements.pop()){
currentElement = $(currentElement);
console.log("Processing element " + currentElement.attr("id"));
//Look at class attribute of element
var classesString = currentElement.attr("class");
if(typeof classesString != 'undefined'){
var arClasses = classesString.split(" ");
//for each class in the current element
for(var i=0; i< arClasses.length; i++){
//fetch the CSS Styles for a single class. Need to append the . char to indicate its a class
var arStylesWithCSSSelector = getStyleWithCSSSelector("."+arClasses[i]);
console.log("Processing class "+ arClasses[i]);
if(arStylesWithCSSSelector != null){
//console.log("Found "+ arStylesWithCSSSelector.length + " CSS style definitions for class " +arClasses[i]);
//append all found styles to the cssString
for(var j=0; j< arStylesWithCSSSelector.length; j++){
var tupleStyleWithCSSSelector = arStylesWithCSSSelector[j];
//check if it has already been added
if(typeof existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] === "undefined"){
//console.log("Adding " + tupleStyleWithCSSSelector.styleDefinition);
cssString+= tupleStyleWithCSSSelector.styleDefinition;
existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] = true;
}else {
//console.log("Already added " + tupleStyleWithCSSSelector.styleDefinition);
}
}
}
}
}
//push all child elments to stack
if(currentElement.children().length>0){
arStackElements= arStackElements.concat(currentElement.children().toArray());
}
}
console.log("Found " + Object.keys(existingClassDefinitions).length + " CSS class definitions");
return cssString;
}