1

可能重复:
如何使用 javascript 删除 css 属性?

当我这样做时,我正在用 js 修改元素溢出:

document.body.style.overflow = 'hidden';

元素变为:

<body style="overflow: hidden;"></body>

之后我想将元素转回:

<body style=""></body>

我不想将溢出更改为任何内容,只需从元素样式中删除溢出,使其回退到 style.css。我试过了:

document.body.style.overflow = '';

这没有任何作用。如何才能做到这一点?

4

3 回答 3

3

你可以这样做

document.body.setAttribute('style','');
于 2012-11-01T07:04:15.433 回答
1

只需像这样清除style属性:

document.body.setAttribute("style", "");

请记住,CSS 可以来自许多部分(样式属性、外部样式表、HTML 标记和 javascript)!

于 2012-11-01T07:05:26.693 回答
1

假设您只是尝试更改当前属性(即使只是简单地取消设置它),这将导致问题。问题似乎是空字符串不被视为 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,但效果似乎大致相同)。

于 2012-11-01T07:18:44.087 回答