Функция для создания стиля построена следующим образом
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");
и работает. Я надеюсь, что есть другое лучшее и более простое решение.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы захотите использовать document.styleSheets [i] .cssRules, который представляет собой массив, который необходимо проанализировать, чтобы найти тот, который вам нужен, а затем rule.style.setProperty ('font-size', '10px', null) ;
Перейдите по этой ссылке: Как изменить / удалить определения классов CSS во время выполнения?.
Надеюсь это поможет.
Спасибо за ссылку @Achu. И что мне делать дальше? Я редактирую свой вопрос и публикую решение или отвечаю на свой вопрос? Последнее кажется смешным, не правда ли? Это ясно из stackoverflow.com/help/self-answer и не абсурдно :-).