假设您只是尝试更改当前属性(即使只是简单地取消设置它),这将导致问题。问题似乎是空字符串不被视为 CSS 属性的合法值,因此不会添加到style
属性中。
在 Chromium 中,这可以解决,但只能显式声明属性的新值,即使仅使用auto
关键字也是如此。考虑到这一点,一种方法如下:
var propStates = {
// define the states, I'm only using two for a 'toggle'
// approach, adjust to taste.
'overflow': ['hidden', 'auto'],
'display': ['block', 'auto']
}
function removeCSSProperty(el, prop) {
if (!el || !prop) {
return false;
}
else {
// el can be either a node-reference *or* a string containing
// the id of the element to adjust
el = el.nodeType == 1 ? el : document.getElementById(el);
var current = window.getComputedStyle(el, null)[prop];
el.style[prop] = propStates[prop][0] == current ? propStates[prop][1] : propStates[prop][0];
}
}
document.getElementById('adjust').onclick = function() {
removeCSSProperty('test', 'overflow');
};
JS 小提琴演示。
这种方法需要浏览器理解该window.getComputedStyle()
功能,不支持 IE <9(虽然它确实有currentStyle
,但效果似乎大致相同)。