Изменить ранее определенный стиль в JS

Функция для создания стиля построена следующим образом

function createStyle(css) {
  var head = document.head || document.getElementsByTagName("head")[0];
  var style = document.createElement("style");
  style.type = "text/css";
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    var textNode = document.createTextNode(css);
    style.append(textNode);
  }
  head.append(style);
}

вдохновлен Код Кристофа и Тома Фуэрта. Затем вызывается для создания стиля с именем класса tab.

createStyle(`
  .tab button {
    background: inherit;
    float: left;
    outline: none;
    border: none;
    padding: 8px 6px;
    width: 60px;
    cursor: pointer;
  }
`);

и элемент HTML, использующий стиль

var div = document.createElement("div");
div.className = "tab";
parent.append(div);

тоже создается. Так что все работает.

После этого мне нужно изменить стиль с именем класса tab, где следующий код

var style = document.getElementsByTagName("style");
var css = style[0].innerHTML
var className = css.split(" ")[0].split(".")[1];

используется для получения имени класса стиля. Мне удалось получить имя класса стиля tab, а также строку, содержащую объект в css.

Вопрос в том, как изменить стиль без изменения строки и воссоздать стиль? Или, если мне нужно это сделать, как мне удалить предыдущий определенный стиль, если уже есть некоторые стили, для которых я не записал порядок доступа к ним через массив sytle[].

Предложенное решение

Используя Как изменить / удалить определения классов CSS во время выполнения?, предложенный Ачу, я сделал эту функцию

// Change style attribute with value
function changeStyleAttribute(style, attr, value) {
  var N = document.styleSheets.length;
  var styles = document.styleSheets;
  for(var i = 0; i < N; i++)
  {
    if (styles[i].rules[0].selectorText == style)
    styles[i].rules[0].style[attr] = value;
  }
}

который называется

changeStyleAttribute(".tab", "width", "299px");

и работает. Я надеюсь, что есть другое лучшее и более простое решение.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы захотите использовать document.styleSheets [i] .cssRules, который представляет собой массив, который необходимо проанализировать, чтобы найти тот, который вам нужен, а затем rule.style.setProperty ('font-size', '10px', null) ;

Перейдите по этой ссылке: Как изменить / удалить определения классов CSS во время выполнения?.

Надеюсь это поможет.

Спасибо за ссылку @Achu. И что мне делать дальше? Я редактирую свой вопрос и публикую решение или отвечаю на свой вопрос? Последнее кажется смешным, не правда ли? Это ясно из stackoverflow.com/help/self-answer и не абсурдно :-).

dudung 14.06.2018 02:49

Другие вопросы по теме