Change ID css in IE with JavaSCript

Question

I'm trying to figure out how to change css display from none to block with javascript but only for IE. Currently I have this code but it won't change the CSS on ID #backfill-image.

<script>
function isIE() {
  ua = navigator.userAgent;
  /* MSIE used to detect old browsers and Trident used to newer ones*/
  var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;

  return is_ie; 
}
/* Create an alert to show if the browser is IE or not */
if (isIE()){

document.getElementById("backfill-image").style.display = "block";
}
</script>

Your code working fine for me. IE11 blocks scripts sometimes, you should see a popup at the bottom of browser after opening website if that's reason. You can also add console log to methods to be sure. — Ralph678, Jun 09 '20 at 11:31

Deepak-MSFT · Accepted Answer · 2020-06-11T08:22:34.693

1

It can be a caching related issue on your end. Try to press CTRL + F5 key to hard refresh the page.

Your code is working on my side.

<!DOCTYPE html> 
<html> 
<head>
<style>
#backfill-image
{
 display:none;
}
</style>

</head>
<body> 
 <div id="backfill-image"><h2>This is my sample text...</h2></div>

<script>
function isIE() {
  ua = navigator.userAgent;
  /* MSIE used to detect old browsers and Trident used to newer ones*/
  var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;

  return is_ie; 
}
/* Create an alert to show if the browser is IE or not */
if (isIE()){

document.getElementById("backfill-image").style.display = "block";
}
</script>
</body> 
</html>

Output in the Ie 11 browser:

If the issue persists then try to make a test with my posted code to see whether it is working or not.

Edit:

IE does not support the => Arrow functions. You need to change the syntax or transpile your code. You can use Babel to transpile the code. Ref: babeljs.io Helpful thread: Why doesn't this arrow function work in IE 11?

Also, inform us whether the issues in the other threads solved or not.

edited Jun 11 '20 at 08:22

answered Jun 09 '20 at 13:18

Deepak-MSFT

10,379
1
12
19

It turns out that I.E isn't loading the JavaScript for some reason on any of the computers. I'm using WordPress, I tried to deactivate some plugins and updating but no luck. I have a feeling that the problem is with WordPress but can't be 100% sure. – in2d Jun 09 '20 at 20:01
1

Can you please check whether the 'Active scripting' option is enabled or not in a similar way as I suggested to you in this thread? Ref: https://stackoverflow.com/questions/62279520/header-video-in-m4v-format-doesnt-play-in-ie-11 – Deepak-MSFT Jun 10 '20 at 08:37
Active scripting is enabled, I'm trying to figure out what's going on with the javascript because one part of the code is breaking the entire javascript but only for I.E. – in2d Jun 10 '20 at 09:13
1

It can be possible that your JS code using something that is not supported in the IE browser may cause this issue. – Deepak-MSFT Jun 10 '20 at 09:15
Yes that is absolutely true, I think the problem is with this line "window.addEventListener('DOMContentLoaded', (event) =>". Which is weird because the JS document suggests that IE supports this. – in2d Jun 10 '20 at 11:27
1

IE does not support the => Arrow functions. You need to change the syntax or transpile your code. You can use Babel to transpile the code. Ref: https://babeljs.io/ Helpful thread: https://stackoverflow.com/questions/40216015/why-doesnt-this-arrow-function-work-in-ie-11#:~:text=IE11%20doesn't%20support%20them,Use%20function%20functions%20instead.&text=IE%20doesn't%20support%20the,your%20ES6%20codes%20to%20ES5. – Deepak-MSFT Jun 10 '20 at 12:00
You're a legend! Such a simple solution and that is really good to know. Got the code working with babel. Thanks! – in2d Jun 11 '20 at 08:16

Change ID css in IE with JavaSCript

1 Answers1