如何使用JavaScript读取CSS规则值？
如何使用JavaScript读取CSS规则值？
提问于 2008-11-27 19:02:00
我想返回一个包含CSS规则所有内容的字符串，就像您在内联样式中看到的格式一样。我希望能够在不知道特定规则中包含什么的情况下执行此操作，因此我不能仅通过样式名称(如.style.width等)来提取它们。
CSS：
.test {
width:80px;
height:50px;
background-color:#808080;
}到目前为止的代码：
function getStyle(className) {
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
for(var x=0;x<classes.length;x++) {
if(classes[x].selectorText==className) {
//this is where I can collect the style information, but how?
}
}
}
getStyle('.test')回答 14
Stack Overflow用户
回答已采纳
发布于 2008-11-27 19:36:26
改编自here，以scunliffe的答案为基础：
function getStyle(className) {
var cssText = "";
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
cssText += classes[x].cssText || classes[x].style.cssText;
}
}
return cssText;
}
alert(getStyle('.test'));Stack Overflow用户
发布于 2014-12-17 22:09:06
因为来自"nsdel“的被接受的答案只适用于文档中的一个样式表，所以这是经过调整的完整工作解决方案：
/**
* Gets styles by a classname
*
* @notice The className must be 1:1 the same as in the CSS
* @param string className_
*/
function getStyle(className_) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
if (!classes)
continue;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
if (classes[x].selectorText == className_) {
var ret;
if(classes[x].cssText){
ret = classes[x].cssText;
} else {
ret = classes[x].style.cssText;
}
if(ret.indexOf(classes[x].selectorText) == -1){
ret = classes[x].selectorText + "{" + ret + "}";
}
return ret;
}
}
}
}注意:选择器必须与CSS中的相同。
Stack Overflow用户
发布于 2015-03-19 02:43:15
解决方案1(跨浏览器)
function GetProperty(classOrId,property)
{
var FirstChar = classOrId.charAt(0); var Remaining= classOrId.substring(1);
var elem = (FirstChar =='#') ? document.getElementById(Remaining) : document.getElementsByClassName(Remaining)[0];
return window.getComputedStyle(elem,null).getPropertyValue(property);
}
alert( GetProperty(".my_site_title","position") ) ;解决方案2(跨浏览器)
function GetStyle(CLASSname)
{
var styleSheets = document.styleSheets;
var styleSheetsLength = styleSheets.length;
for(var i = 0; i < styleSheetsLength; i++){
if (styleSheets[i].rules ) { var classes = styleSheets[i].rules; }
else {
try { if(!styleSheets[i].cssRules) {continue;} }
//Note that SecurityError exception is specific to Firefox.
catch(e) { if(e.name == 'SecurityError') { console.log("SecurityError. Cant readd: "+ styleSheets[i].href); continue; }}
var classes = styleSheets[i].cssRules ;
}
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == CLASSname) {
var ret = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText ;
if(ret.indexOf(classes[x].selectorText) == -1){ret = classes[x].selectorText + "{" + ret + "}";}
return ret;
}
}
}
}
alert( GetStyle('.my_site_title') );页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/324486
复制相关文章
相似问题