Изменить ширину/высоту в зависимости от класса с атрибутом данных

У меня есть следующий код JS, который изменяет width в зависимости от значения HTML-атрибута data-percentage:

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/

Вместо width для некоторых элементов я хочу изменить их height.

Как я могу изменить код, чтобы в зависимости от класса div я изменил высоту или ширину элемента (конечно, в зависимости от номера атрибута data-percentage)?

Я не хочу создавать для него другой HTML-атрибут, например:

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

Можно также использовать jQuery. Любые идеи?


javascript html jquery css custom-data-attribute
person Alex    schedule 22.11.2013    source источник
comment
Вам действительно нужно изменить таблицу стилей или вы можете просто изменить элементы? Если на то пошло, почему бы просто не закодировать 100 правил в таблицу стилей? (Ну, 200 правил, если вы хотите разделить ширину и высоту.) div[data-percentage-height=1].change-height { height: 1% } и тому подобное?   -  person T.J. Crowder    schedule 22.11.2013

Ответы (2)


arrow_upward
4
arrow_downward

Ваш код добавляет правила. Если вы действительно хотите это сделать, просто добавьте больше правил:

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 будет изменено их height (и вы можете использовать оба, если хотите).

person T.J. Crowder    schedule 22.11.2013

arrow_upward
1
arrow_downward

Попробуй это:

$("div[data-percentage]").each(function(){

    $(this).css({
        width: $(this).attr('data-percentage')
        //height: $(this).attr('data-percentage')
    });
});

http://jsfiddle.net/YYF35/1/

person Andrew    schedule 22.11.2013
comment
Посмотрите еще раз на код. Это создание таблицы стилей, а не изменение самих элементов. - person T.J. Crowder; 22.11.2013