Question

我正在编写一个小插件，让用户可以在没有jquery的情况下轻松地在javascript中添加转换：

HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Snippety</title>
<script src="snip.js" type="text/javascript"></script>
<link rel="stylesheet" href="snip.css" type="text/css" />
</head>

<body>

<script>
transition(
transSelector = '.snip',
transTime = '5s',
transDelay = 0000,
transFunc = 'transTo("background-color:red!important;")'
);
</script>

<div class="snip" id="snip">buhhug</div>

</body>
</html>

Js插件：

function transition(transSelector,transTime,transDelay,transFunc) {
document.styleSheets[0].insertRule(''+transSelector+' {transition:'+transTime+';-webkit-transition:'+transTime+';}');
setTimeout(transFunc, transDelay)
}

function transTo(rule) {
    document.styleSheets[0].insertRule(''+transSelector+' {'+rule+'}');
}

CSS：

.snip {
background-color: green;
}

问题是，当javascript中的颜色变为红色时，我需要添加!important来将.snip更改为background-color:red;，但它只能运行一次。有没有办法删除css样式表中的background-color:green;，或者覆盖而不必将!important放入其中？（我的目标是不止一次改变颜色）。

我已尝试.addRule而不是.insertRule，但我认为我正在咆哮错误的树。

Answer 1

insertRule有第二个参数，表示您要插入规则的位置。如果该参数为0，则将其插入样式表的顶部。哪个会把它放在所有其他规则之前，这意味着原始规则实际上是在之后的第一个规则。试试document.styleSheets[0].insertRule(''+transSelector+' {'+rule+'}', 1);。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule。

编辑回答第二个问题：

这可能属于另一个问题，但我会尽力帮助你。我确定这只是你代码的一个子集，因此很难确切知道你在这里要做什么。但这里有几个问题。

首先，您要调用transition函数并提供变量名称和值。在某些语言中，您可以使用这样的“命名参数”，但在JS中，它并不是您想要它做的。你实际在做的是创建一个名为transSelector的全局变量，然后将其设置为'.snip'。其余变量也是如此。这些值确实传递给transition函数。然后，再次调用transition，但现在用新值覆盖相同的全局变量。在调用transTo时，transSelector并不意味着它曾经意味着什么，而且它会搞得一团糟。摆脱全局变量并仅传递值。

这导致了一个不同的问题，即transTo不知道transSelector是什么，因为它不是全局的。此外，由于您将字符串传递给setTimeout只是another form of eval()，因此可能存在滥用行为。相反，您可以将其转换为匿名函数，并且可以使用相同的参数。

所以新插件看起来像这样：

function transition(transSelector,transTime,transDelay,transRule) {
  document.styleSheets[0].insertRule(''+transSelector+' {transition:'+transTime+';-webkit-transition:'+transTime+';}', 1);
  setTimeout(function () {
    document.styleSheets[0].insertRule(''+transSelector+' {'+transRule+'}', 1);
  }, transDelay)
}

你会这样称呼它：

transition('.snip', '5s', 0000, 'background-color:red !important;');

如果您需要有关该插件的更多帮助，我建议您创建一个单独的问题，因为这可能需要比我们想要编辑有关insertRule的问题更深入。

使用JavaScript覆盖/删除CSS属性

1 个答案: