Question

我有一个函数，可以使用一些CSS规则将样式标签添加到HTML主体中，以重写css中声明的样式，而另一个可以删除样式标签。添加样式也可以将其删除，但是当我尝试在删除第一个样式标签之后尝试添加第二个样式标签时，它没有任何作用（但是如果我再次添加第一个样式标签，则可以毫无问题地应用第一个样式标签）。（要删除它们，请使用我在addStyleRule的第二个参数中添加的标题在DOM中找到它们。）

编辑：如注释中所述，如果包含不同文本的第二个样式标签的标题与第一个样式标签的标题相同，则正确应用了该样式标签。这只会使问题更加混乱，就像文档只能包含样式标签一样，但是我已经检查了MDN文档(here)，并且他们警告的唯一问题是如果书写顺序错误，可能会覆盖错误。（这并不适用，因为在添加第二个之前我先删除了第一个，因此它们之间的冲突一定非常困难。）

在此代码段中，您可以看到添加样式标签是可行的：

function addStyleRule(str, title){
		var style = document.createElement('style');
		style.innerHTML = str;
		if(title)style.title = title;
		document.body.appendChild(style);
	}
function removeStyleRule (title) {
		for (var i in document.body.children){
			var child = document.body.children[i] || '';
			if(child && child.tagName && child.tagName == 'STYLE'){
				if(child.title == title){
					document.body.children[i].innerHTML = '';
					document.body.removeChild(child);
				}
			}
		}	
}
addStyleRule(':root{--font-color:red}','a');

:root{
--font-color:black;
color:var(--font-color);
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>This is red.</div>
</body>
</html>

在此示例中，您可以看到删除第一个样式后添加第二种样式无效。它添加了一个名为“ a”的规则，然后将其删除，然后添加了另一个名为“ b”的规则，但是它不起作用。如果您按下该按钮，它将再次应用第一个按钮，即使没有删除第二个按钮，该按钮也仍然有效，而且没有用。

function addStyleRule(str, title) {
  var style = document.createElement('style');
  style.innerHTML = str;
  if (title) style.title = title;
  document.body.appendChild(style);
}

function removeStyleRule(title) {
  for (var i in document.body.children) {
    var child = document.body.children[i] || '';
    if (child && child.tagName && child.tagName == 'STYLE') {
      if (child.title == title) {
        document.body.children[i].innerHTML = '';
        document.body.removeChild(child);
      }
    }
  }
}
addStyleRule(':root{--font-color:red}','a');
removeStyleRule('a');
addStyleRule(':root{--font-color:limegreen}','b');

:root {
  --font-color: black;
  color: var( --font-color);
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div>This should be limegreen.</div>
  <button onclick="addStyleRule(':root{--font-color:red}','a');">If we re-add the first one, it is applied</button>
</body>

</html>

有人对第二个为什么不起作用有任何见解吗？哦，我已经尝试了没有css变量的尝试，但仍然无法正常工作，因此我知道问题不存在。

删除另一个样式标签后，通过js添加样式标签后无法正常工作

0 个答案: