使用纯 js 删除 css 属性失败

Question

我尝试使用以下代码从我的 css 中删除一个属性，但不起作用。

 document.getElementById("wrap").style.removeProperty('overflow-x');

CSS：

#wrap{
overflow-x : hidden;
}

当我运行 javascript 时，出现错误 Cannot read property 'style' of null

Answer 1

发布的代码将在以下情况下删除 overflow-x 样式：

<div id="wrap" style="overflow-x: hidden"></div>

CSS 应用的属性不直接应用到元素的样式属性 - 它们应用在更高的层。

实际上，样式属性上没有要删除的内容，但您可以在那里设置一个值，这将覆盖从 CSS 属性应用的值（除非 css 有!important 指定标志）

试试这个：

document.getElementById("wrap").style.overflowX = 'visible';

由于您的具体情况是基于某些浏览器检测来应用样式，因此我建议如下 javascript:

var userAgent = window.navigator.userAgent.toLowerCase();
var is_ios = /iphone|ipod|ipad/.test( userAgent );
if (!is_ios) document.body.className += 'not-ios';

与CSS:

.not-ios #wrap {
    overflow-x : hidden;
}

您也可以使用 class "wrap" 而不是 id 以使其更易于重复使用（如果需要）

使用纯 js 删除 css 属性失败

remove css property with pure js failed

javascript

css