Изменение значений свойств класса CSS на лету с помощью JavaScript / jQuery

Question

Я столкнулся с уникальной ситуацией, которую до сих пор не смог найти решение для: динамического присвоения значения стилю CSS. Я знаю, как использовать jQuery для присвоения ширине, высоте и т. Д. Элементу, но я пытаюсь на самом деле изменить значение, определенное в таблице стилей, чтобы динамически создаваемое значение можно было назначить нескольким элементам.

То, что я строю, представляет собой слайд-шоу изображений, которые занимают весь видовой экран, пересчитывая свойства ширины, высоты и левого размера изображения при изменении размера, так что изображение всегда центрируется, предпочитая ширину по высоте, за исключением случаев, когда область просмотра выше чем это широко (изменение размера не перезагружает страницу, только вызывает функцию, чтобы изменить размер изображения).

Я успешно смог заставить его работать на одном изображении, и теперь я пытаюсь определить наилучший способ присвоить эти значения свойств всем изображениям в слайд-шоу, не задавая эти три вещи индивидуально для каждого изображения. ,

Мой вопрос:

Можно ли изменять значения свойств в классе на лету? Я уверен, что ответ там, я, вероятно, просто не использую правильную терминологию в моих поисках. Надеюсь, я хорошо описал проблему. ТИА.

Answer 1

YUI 2 и 3 имеет таблицу стилей модуля, которая позволит вам сделать это (редактируйте таблицы стилей на лету с помощью javascript). http://yuilibrary.com/yui/docs/stylesheet/. Так что я думаю, что это возможно. Это не то же самое, что $ (". Some"). Css ({...}), но действительно изменить / добавить / удалить определение стилей из таблицы стилей, как и просил пользователь.

Answer 2

Вы должны действительно переосмыслить свой подход к этой проблеме. Использование хорошо созданного селектора и присоединение класса может быть более элегантным решением для этого подхода. Насколько я знаю, вы не можете изменить внешний CSS.

Answer 3

Это решение изменяет Cycne для использования синтаксиса ES6 и досрочного выхода из цикла для внешних таблиц стилей.Это решение не изменяет внешние таблицы стилей

function changeStyle(findSelector, newDeclarations) {
    // Change original css style declaration.
    document.styleSheets.forEach((sheet) => {
      if (sheet.href) return;
      const cssRulesList = sheet.cssRules;
      cssRulesList.forEach((styleRule) => {
        if (styleRule.selectorText === findSelector) {
          Object.keys(newDeclarations).forEach((cssProp) => {
            styleRule.style[cssProp] = newDeclarations[cssProp];
          });
        }
      });
    });
  }

  const styleDeclarations = {
    'width': '200px',
    'height': '400px',
    'color': '#F00'
  };
  changeStyle('.paintBox', styleDeclarations);

В разделе заголовка HTML также должен быть хотя бы один тег стиля, например

<style> .paintBox {background-color: white;}</style>

Answer 4

Это может быть поздно для обсуждения, но мне нужно было что-то вроде того, о чем здесь говорят, но я не нашел ничего, что действительно сделало бы то, что я хотел, и сделал это легко.Мне нужно было скрыть и показать многочисленные элементы без явного посещения каждого элемента в отдельности, чтобы каким-то образом обновить их, изменив стиль отображения на скрытый.Поэтому я придумал следующее:

<style>
  /* The bulk of the css rules should go here or in an external css file */
  /* None of these rules will be changed, but may be overridden */
  .aclass { display: inline-block; width: 50px; height: 30px; }
</style>
<style id="style">
  /* Only the rules to be changed should go in this style */
  .bclass { display: inline-block; }
</style>
<script>
  //
  // This is a helper function that returns the named style as an object.
  // This could also be done in other ways.
  // 
  function setStyle() { return document.getElementById( 'style' ); }
</script>
<div id="d1" class="aclass" style="background-color: green;">
  Hi
</div>
<!-- The element to be shown and hidden --> 
<div id="d2" class="aclass bclass" style="background-color: yellow;">
  there
</div>
<div id="d3" class="aclass" style="background-color: lightblue;">
  sailor
</div>
<hr />
<!-- These buttons demonstrate hiding and showing the d3 dive element -->
<button onclick="setStyle().innerHTML = '.bclass { display: none; }';">
  Hide
</button>&nbsp;&nbsp;
<button onclick="setStyle().innerHTML = '.bclass { display: inline-block; }';">
  Show
</button>

Переключив правило bclass во встроенной и именованной таблице стилей, которая идет после любых других соответствующих таблиц стилей, в данном случае с таблицей правил, я мог быобновите правило just display css в одном месте и переопределите правило aclass, которое также имело свое собственное правило отображения.

Прелесть этого метода в том, что он настолько прост, что фактически одна строка выполняетдля реальной работы не требуются никакие библиотеки, такие как JQuery или плагины, а реальная работа по обновлению всех мест, к которым применяется изменение, выполняется основной функциональностью браузера css, а не JavaScript.Кроме того, он работает в IE 9 и более поздних версиях, Chrome, Safari, Opera и во всех других браузерах, которые MicroSoft Edge может эмулировать, для настольных компьютеров и планшетов / телефонов.