Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Управление размеров в стилях через JavaScript (https://javascript.ru/forum/misc/70380-upravlenie-razmerov-v-stilyakh-cherez-javascript.html)

MC-XOBAHCK 01.09.2017 14:16

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

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

Я свой вариант на jQuery затёр и забыл, но это тоже работает как надо:
document.querySelector('.test').style.borderBottomWidth = x+'px';
document.querySelector('.test').style.borderLeftWidth = y+'px';

Rasy 01.09.2017 14:26

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 01.09.2017 14:29

Цитата:

Сообщение от MC-XOBAHCK
Я свой вариант на jQuery затёр и забыл

На jquery еще проще, есть специальный метод.
$('.test').css('border-bottom-width', x+'px');

Nexus 01.09.2017 14:32

Rasy, а так не проще?
$('.test').css({'border-bottom-width':'600px','border-left-width':'500px'});


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

j0hnik 01.09.2017 14:52

Цитата:

Сообщение от Rasy (Сообщение 463338)
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'
    });

:write: пригодится

Rasy 01.09.2017 15:10

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 01.09.2017 15:16

Rasy,
Спасибо =)


Часовой пояс GMT +3, время: 23:13.