remove css property with pure js failed

Question

I tried the following code to remove a property from my css but doesn't work.

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

The CSS:

#wrap{
overflow-x : hidden;
}

When I run the javascript, I get the error Cannot read property 'style' of null

Duplicate? http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — Scriptable, Jan 08 '15 at 01:50
What do you mean by "doesn't work"? Describe your problem. Are you getting an error of some sort? If so, post it in your question. — unbindall, Jan 08 '15 at 01:55
@DominatorX the id wrap still contain the overflow-x property — John St, Jan 08 '15 at 01:57
@KevinBowersox the alert did fired.. yes I'm testing on iphone.. — John St, Jan 08 '15 at 01:57
What is "pure JS"? Is it the same as "plain old JS"? Actually I do know what it means: JS without jQuery. But nevertheless the term "pure JS" somehow sounds very strange to me. In this case, `removeProperty` is not even JavaScript, pure or otherwise; it's the DOM API. So I suppose the title should be "remove css property with DOM API failed", or "remove CSS property with removeProperty failed". Of course, given the specific issue, the actual title should be "removeProperty on element's style does not remove CSS property set via CSS rule, especially if the element does not exist". — , Jan 08 '15 at 02:19

Joel Cox · Accepted Answer · 2015-01-08T02:22:06.880

4

The code posted would remove overflow-x style in the following scenareo:

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

CSS applied properties are not applied directly to the style attribute of an element - they are applied at a layer higher.

Effectively, there's nothing to remove on the style property, but you can set a value there instead, which would override the value applied from CSS properties (unless css has !important flag specified)

Try this instead:

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

As your specific scenario is about applying the style based on some browser detection, I suggest the following javascript:

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

With CSS:

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

You could also use class "wrap" instead of id to make this more re-usable (if required)

edited Jan 08 '15 at 02:22

answered Jan 08 '15 at 01:59

Joel Cox

3,289
1
14
31

I see this worked but how to remove the css? not style. – John St Jan 08 '15 at 02:00
Well your CSS rule targets elements with ID "wrap". You could change/remove the ID of the element, or change the CSS rule to target a specific classname which you remove for iOS devices. – Joel Cox Jan 08 '15 at 02:01
Then you just remove the class from the element instead. [Some possible methods here](http://stackoverflow.com/a/2155787/3180129). – Joel Cox Jan 08 '15 at 02:09
how to select the id then? since it's .wrap. – John St Jan 08 '15 at 02:10
You could loop through elements found using [document.getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName) and set the property for each of them. Alternately to avoid a loop and the reliance of timing logic, you could have a single class name (e.g. `not-ios`) added to an element high up in the document (html or body for example) and make your css selector `.not-ios .wrap {...}`, then remove this one class when the browser is detected as an iOS device. – Joel Cox Jan 08 '15 at 02:16
Updated answer with some more detail about your specific scenario of applying the css rules based on browser detection. – Joel Cox Jan 08 '15 at 02:22
@JohnSt Please mark as correct answer if this helped you solve your problem. Thanks. – Joel Cox Jan 08 '15 at 05:56
if not ios, apply body with a class name of not-ios? am I right? – John St Jan 08 '15 at 12:50

remove css property with pure js failed

1 Answers1