javascript - 根据具有数据属性的类更改宽度/高度

Question

我有以下 JS 代码，它根据 data-percentage HTML 属性的值更改 width:

var addRule = (function (sheet) {
  if(!sheet) return;
  return function (selector, styles) {
    if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
    if (sheet.addRule) return sheet.addRule(selector, styles);
  }
}(document.styleSheets[document.styleSheets.length - 1]));

var i = 101;
while (i--) {
  addRule("[data-percentage='" + i + "%']", "width:" + i + "%");
}

查看演示:http://jsfiddle.net/YYF35/

对于某些元素，我想更改它们的高度，而不是宽度。

如何更改代码，以便根据 div 的类更改元素的高度或宽度(当然取决于 data-percentage 属性号) )？

我不想为它创建不同的 HTML 属性，如下所示:

while (i--) {
  addRule("[data-percentage-width='" + i + "%']", "width:" + i + "%");
  addRule("[data-percentage-height='" + i + "%']", "height:" + i + "%");
}

也可以使用 jQuery。有什么想法吗？

Answer 1

您的代码正在添加规则。如果您确实想这样做，只需添加更多规则:

var i = 101;
while (i--) {
  addRule("[data-percentage='" + i + "%'].change-width", "width:" + i + "%");
  addRule("[data-percentage='" + i + "%'].change-height", "height:" + i + "%");
}

现在，具有 change-width 类的元素将修改其 width，并且具有 change-height 类的元素将修改其 width height 已修改(如果您愿意，您可以同时使用两者)。