Управление размеров в стилях через JavaScript

[MC-XOBAHCK]

Спасибо всем за участие!
Большие СПАСИБО j0hnik, Вы мне помогли в который раз убедиться что у меня кривые руки.
Всё работает с первым вариантом, но я столкнулся с ошибкой, которую не мог понять и найти. Пока на форуме тему не создал, а затем в чистом файле не убедился что работает - был мой код под ошибкой.

Короче нужно мне было это прописывать внутри:
$('document').ready(function(){
а я умудрился вне этой функции писать, поэтому у меня не работало и выдавало ошибку в консоле.

Я свой вариант на jQuery затёр и забыл, но это тоже работает как надо:

document.querySelector('.test').style.borderBottomWidth = x+'px';
document.querySelector('.test').style.borderLeftWidth = y+'px';

[Rasy]

MC-XOBAHCK,
Вот набросал лучший, гибкий вариант, если не через атрибуты изменять свойства

(function(selector, options) {
      var style = document.styleSheets[0];
      var rules = style.rules;

      [].some.call(rules, function(rule) {
        if (rule.selectorText == selector) {
          for (var prop in options) {
            rule.style.setProperty(prop, options[prop]);
          }
        }
      });
      
    })('.test', {
      'border-bottom-width': '600px', 
      'border-left-width': '500px'
    });

[Rasy]

Я свой вариант на jQuery затёр и забыл

На jquery еще проще, есть специальный метод.

$('.test').css('border-bottom-width', x+'px');

[Nexus]

Rasy, а так не проще?

$('.test').css({'border-bottom-width':'600px','border-left-width':'500px'});

Upd. Не видел поста №13.

[j0hnik]

(function(selector, options) {
      var style = document.styleSheets[0];
      var rules = style.rules;

      [].some.call(rules, function(rule) {
        if (rule.selectorText == selector) {
          for (var prop in options) {
            rule.style.setProperty(prop, options[prop]);
          }
        }
      });
      
    })('.test', {
      'border-bottom-width': '600px', 
      'border-left-width': '500px'
    });

пригодится

[Rasy]

j0hnik,
Немного подретушировал для копилки сниппетов хрома

(function(selector, options, n) {
  n = n || 0;
  var style = document.styleSheets[n];
  var rules = style.rules;

  [].some.call(rules, function(rule) {
    if (rule.selectorText == selector) {
      for (var prop in options) {
        rule.style.setProperty(prop, options[prop]);
      }
      return;
    }
  });
  
})('.test', {
  'width': '200px', 
  'height': '200px'
});

[j0hnik]

Rasy,
Спасибо =)