CODEWITHSUNDEEP
javascripthtmlcssinternet-explorerdisplay
in2d
in2d

Reputation: 638

Change ID css in IE with JavaSCript

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>

Upvotes: 0

Views: 158

Answers (1)

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

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:

enter image description here

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.

Upvotes: 1

Related Questions