Изменение css с помощью document.styleSheets - PullRequest
Новая
       4

Изменение css с помощью document.styleSheets

1 голос
/ 28 мая 2020

Я пытаюсь изменить CSS, изменив: 

document.styleSheets[0].cssRules[0].style.fontSize = '1rem';

Он отлично работает на P C, но при использовании мобильных браузеров (как минимум chrome и Mozilla) запуск этого скрипта не вызывает эффект.

Что я сделал не так? Если такой способ модификации CSS по какой-то причине не поддерживается глобально, как я могу изменить CSS другим способом?

РЕДАКТИРОВАТЬ: Я хочу изменить стиль для всех существующих и всех будущих динамически добавляемых объектов с точным классом. Так что el.style.fontSize - не очень хороший вариант.

Ответы [ 5 ]

0 голосов
/ 28 мая 2020

У вас будет больше контроля, используя css переменные, ниже вы можете найти небольшую демонстрацию, которая иллюстрирует мою точку зрения 

let root = document.documentElement;

document
  .querySelector('button')
  .addEventListener('click', () => {
    let currentVal = Number(getComputedStyle(root).getPropertyValue('--defaultFontSize').replace('px', ''));
    root.style.setProperty('--defaultFontSize', `${currentVal + 5}px`);
  });
:root {
  --defaultFontSize: 20px;
}

.text {
  font-size: var(--defaultFontSize);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p class="text">Some text</p>
  
  <button>Increse font size</button>
</body>
</html>
0 голосов
/ 28 мая 2020

Когда я в последний раз имел дело с этим, манипулирование CSSOM не очень хорошо поддерживалось многими браузерами (и я думаю, что это еще не изменилось).

Если вы хотите применить стили к одному элементу, сделайте это непосредственно с элементом.

Если вы хотите сгенерировать css правила во время выполнения, вы также можете рассмотреть возможность добавления тега стиля в свой документ: 

var style = document.createElement('style');

// set style properties
// append the style tag to the head or somewhere in the body

head.appendChild(style);
0 голосов
/ 28 мая 2020

Из Документы MDN (примерно DocumentOrShadowRoot.styleSheets):

Это экспериментальная технология.

Проверьте таблицу совместимости браузеров внимательно перед использованием этого метода в производстве.

Ожидайте, что поведение изменится в будущем.

Поэтому я бы не советовал использовать этот метод.

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

Теперь, чтобы ответить на ваш следующий вопрос:

как я могу изменить CSS другим способом?

Я всегда сначала получаю элемент через DOM, а затем применять стили к элементу напрямую. Например: 

var myEl = document.getElementById("myId");

Затем вы можете сделать: 

myEl.style.fontSize = "1rem";

Если вы не хотите нацеливать элемент по его атрибуту id, вы можете использовать несколько других методов:

  1. getElementsByClassName() - принимает строковое значение имени класса, например . "myClass"
  2. getElementsByTagName() - принимает строковое значение имени тега, например. "body", "div"
  3. querySelector() - принимает строковое значение селектора CSS, например. "div.myClass p"

Однако они не возвращают ни одного элемента, такого как селектор id. Например, чтобы получить первый элемент определенного класса: 

var myEl = document.getElementsByClassName("myClass")[0];

И четвертый будет: 

var myEl = document.getElementsByClassName("myClass")[3];
0 голосов
/ 28 мая 2020

Непосредственное изменение таблиц стилей может оказаться сложной задачей.

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

Например, это установит размер шрифта основного текста на 1rem: 

let style = document.createElement('style');
style.innerHTML = 'body { font-size: 1rem; }';
document.head.appendChild(style);
0 голосов
/ 28 мая 2020

Если у вас есть имя класса или идентификатор того, что вы хотите изменить, вы можете использовать метод jquery css ().

например: $("#whateverID").css('font-size', '1rem');

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...