覆盖/删除CSS属性与JavaScript的

我写一个小插件，让用户轻松地在JavaScript中添加过渡没有jQuery的：覆盖/删除CSS属性与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，但我想我在吠叫错误的树。

来源

2015-05-09 ScriptKitty

我很惊讶它需要重要的 - 我认为JavaScript把内联样式和内联样式覆盖任何其他CSS样式，！重要或否则 – wunth

它只适用于我放！重要的是，它只是保持绿色，否则 – ScriptKitty

它是否使如果你使transSelector ='＃snip'有所不同 – wunth

insertRule有第二PARAM表示要插入规则。如果该参数为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的问题更深入。

来源

2015-05-09 04:22:32 mherzig

如何让它适用于多个元素，如果我尝试复制转换函数，并将其设置为不同的元素，它只会加载第一个转换。 – ScriptKitty

我认为那个剧本可能会有另一个问题;你没有将'transSelector'传递给第二个函数，所以它可能将其视为一个全局变量。您可能需要将'transSelector'传递到'transTo'函数中。 – mherzig

很好的@mherzig，但是有没有什么方法'transSelector'不必在'transTo'函数中使用（我只希望'transSelector'只能使用一次），最好只使用'transition'函数。 – ScriptKitty

覆盖/删除CSS属性与JavaScript的

回答

相关问题