Question

我正在尝试使用JavaScript在textarea中显示一组CSS属性：

var exampleone = document.getElementById('th001');
var borderbox = window.getComputedStyle(exampleone).getPropertyValue('cursor');

    document.getElementById("csstextareadisp").value = borderbox;

但是它只显示一个元素，我必须指定它。

我希望JavaScript能够读取CSS文档中存在的所有属性，并在CSS文档中显示它们，例如

.exone{
    border-style: solid;
    border-width: 2px;
    border-color: rgba(57,165,255,1.00);
    width: 150px;
    height: 30px;
    position: relative;
    text-align: center;
    background-color: transparent;
    color: black;
}

.exone:hover{
    cursor: pointer;
    background-color: rgba(57,165,255,1.00);
    color: white;
}

我的问题是，有没有一种方法可以使用JavaScript让它在textarea中显示（如上所示），而不是设置为使用：

document.getElementById("csstextareadisp").value = ".exone{ \n border-style: solid; \n border-width: 2px; \n border-color: rgba(57,165,255,1.00); \n width: 150px; \n height: 30px; \n position: relative; \n text-align: center; \n background-color: transparent;color: black; \n } \n\n .exone:hover{ \n cursor: pointer; \n background-color: rgba(57,165,255,1.00); \n color: white; \n }";

Answer 1

更新回答

这里有一个有用的主题：

How to get the applied style from an element, excluding the default user agent styles

我尝试增强本主题中提供的解决方案，以便更好地满足您的需求...

添加参数以便能够选择是否包含内联样式，
添加函数以正确缩进样式
尝试简化一些代码。

＆＃13;

var proto = Element.prototype;
var slice = Function.call.bind(Array.prototype.slice);
var matches = Function.call.bind(proto.matchesSelector ||
  proto.mozMatchesSelector || proto.webkitMatchesSelector ||
  proto.msMatchesSelector || proto.oMatchesSelector);

// Returns true if a DOM Element matches a cssRule
var elementMatchCSSRule = function(element, cssRule) {
  // console.log(cssRule) //.selectorText.split(":")[0]); // Testing to add hover
  return matches(element, cssRule.selectorText);
};

// Returns true if a property is defined in a cssRule
var propertyInCSSRule = function(prop, cssRule) {
  return prop in cssRule.style && cssRule.style[prop] !== '';
};

// Here we get the cssRules across all the stylesheets in one array
var cssRules = slice(document.styleSheets).reduce(function(rules, styleSheet) {
  return rules.concat(slice(styleSheet.cssRules));
}, []);

// Get only the css rules that matches that element
var getAppliedCSS = function(elm) {
  var elementRules = cssRules.filter(elementMatchCSSRule.bind(null, elm));
  var rules = [];
  if (elementRules.length) {
    for (i = 0; i < elementRules.length; i++) {
      rules.push({
        order: i,
        text: elementRules[i].cssText
      })
    }
  }
  return rules;
}

// TAKIT: Added this function to indent correctly
function indentAsCSS(str) {
  return str.replace(/([{;}])/g, "$1\n ").replace(/(\n[ ]+})/g, "\n}");
}

function getStyle(elm, lookInHTML = false) { // TAKIT: Added the new parameter here
  var rules = getAppliedCSS(elm);
  var str = '';
  for (i = 0; i < rules.length; i++) {
    var r = rules[i];
    str += '/* CSS styling #' + r.order + ' */\n' + r.text;
  }
  
  // TAKIT: Moved and simplified the below from the other function to here
  if (lookInHTML && elm.getAttribute('style')) // TAKIT: Using the new parameter
    str += '\n/* Inline styling */\n' + elm.getAttribute('style');
  
  return indentAsCSS(str);
}

// Output in textarea
var exone = document.getElementById("exone");
var result = document.getElementById("result");
result.value = getStyle(exone, true); // TAKIT: Using the new parameter for inline style

＆＃13;

#exone {
  border-style: solid;
  border-width: 2px;
  border-color: rgba(57, 165, 255, 1.00);
  width: 150px;
  height: 30px;
  position: relative;
  text-align: center;
  background-color: transparent;
  color: black;
}

#exone:hover {
  cursor: pointer;
  background-color: rgba(57, 165, 255, 1.00);
  color: white;
}

#result {
  width: 90%;
  height: 240px;
}

＆＃13;

<div id="exone" style="opacity: 0.95;"></div>
<textarea id="result"></textarea>

＆＃13;

（我也尝试将:hover样式添加到输出中，但我无法使其生效）

⋅ ⋅ ⋅

旧答案
（当我还没有找到任何有用的东西时）

由于.getComputedStyle在CSS和其他CSS之间没有任何区别，因此区分它们似乎很复杂。

所以，这是一次尝试：

我做了一个循环，将元素exone与另一个尚未使用CSS样式化的参考元素进行比较，
我们参考的元素似乎必须在页面上才能有效地比较它们，所以我将它放在HTML中。
在循环中，如果值相同，那必然意味着它们都没有风格化，因此，我们跳到下一个项目。

我最终得到了这个片段：

＆＃13;

// Get style of our example element
var exampleone = document.getElementById('exone');
var styles_one = window.getComputedStyle(exampleone);

// Get style of a reference element without CSS
var reference = document.getElementById('exref');
var styles_ref = window.getComputedStyle(reference);

// Loop and compare our example element with the reference element
var results = {};
for (var key in styles_ref) {
  if(key.includes('webkit')) continue;             // Next if webkit prefix
  if(styles_one[key] == styles_ref[key]) continue; // Next if same value as the ref
  results[key] = styles_one[key];                  // Copy value in results[key]
}
delete results.cssText; // Useless in our case

// Output in console
console.log(results);

＆＃13;

#exone {
  border-style: solid;
  border-width: 2px;
  border-color: rgba(57, 165, 255, 1.00);
  width: 150px;
  height: 30px;
  position: relative;
  text-align: center;
  background-color: transparent;
  color: black;
}

#exone:hover {
  cursor: pointer;
  background-color: rgba(57, 165, 255, 1.00);
  color: white;
}

＆＃13;

<div id="exone"></div>
<div id="exref"></div>

＆＃13;

控制台应该只显示与非风格化参考元素不同的CSS ......所以，这必须来自CSS！

现在，我们只需要格式化这个输出并将其放在textarea中。

随意发表评论。

希望它有所帮助。

如何显示所有CSS选择器＆amp; textarea中的属性？

1 个答案: