Javascript删除元素样式[重复]答案

【问题标题】：Javascript remove elements styling [duplicate]Javascript删除元素样式[重复]
【发布时间】：2012-10-21 18:20:58
【问题描述】：

可能重复：
how to remove css property using javascript?

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

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

元素变成：

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

之后我想将元素转回：

<body style=""></body>

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

document.body.style.overflow = '';

什么都不做。如何做到这一点？

【问题讨论】：

可能duplicate
这里似乎是某种飞行员错误，因为这应该完全按照您的意愿工作。

标签： javascript css

【解决方案1】：

你可以这样做

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

【讨论】：

OP 只想删除 overflow，而不是所有样式..

【解决方案2】：

假设您只是尝试更改当前属性（即使只是简单地取消设置），这将导致问题。问题似乎是空字符串不被视为 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 Fiddle demo.

这种方法需要浏览器理解window.getComputedStyle() 函数，IE 不支持的（虽然它确实有currentStyle，这在效果上看起来差不多）。

【讨论】：

【解决方案3】：

只需像这样清除style 属性：

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

请记住，CSS 可以来自许多部分（样式属性、外部样式表、HTML 标记和 javascript）！

【讨论】：