In this case I can not set the element state to visible:
<html>
<head>
<style type="text/css">
#elem {display:none}
</style>
</head>
<body>
<div id="elem">.......</div>
<script type="text/javascript">
document.getElementById("elem").style.display="";
</script>
</body>
</html>
it works only when I set display to "block".
In this case it works:
<html>
<head>
</head>
<body>
<div id="elem" style="display:none">.......</div>
<script type="text/javascript">
document.getElementById("elem").style.display="";
</script>
</body>
</html>
My interest is to make it work in first case without setting "block".
In this case I can not set the element state to visible:
<html>
<head>
<style type="text/css">
#elem {display:none}
</style>
</head>
<body>
<div id="elem">.......</div>
<script type="text/javascript">
document.getElementById("elem").style.display="";
</script>
</body>
</html>
it works only when I set display to "block".
In this case it works:
<html>
<head>
</head>
<body>
<div id="elem" style="display:none">.......</div>
<script type="text/javascript">
document.getElementById("elem").style.display="";
</script>
</body>
</html>
My interest is to make it work in first case without setting "block".
Share Improve this question asked Apr 4, 2013 at 10:26 PaulPaul 26.7k41 gold badges133 silver badges263 bronze badges 1- means the above thing {display:none} is not working, it not reading even {display:block} , because writin block or not wont create any difference, it'll display it as usual – Deepanshu Goyal Commented Apr 4, 2013 at 10:29
4 Answers
Reset to default 5Why do you want to use inline styles instead of css classes?
<html>
<head>
<style type="text/css">
#elem.hidden {display:none}
</style>
</head>
<body>
<div id="elem" class="hidden">.......</div>
<script type="text/javascript">
document.getElementById("elem").className = '';
</script>
</body>
</html>
Setting the .style.display property to "" will remove any inline style from the element. The previous value in the cascade will then apply.
In this case, there is no inline style to start with, and the "none" value is already received from the cascade.
You could set the value to the "initial" keyword, but you may find browser support lacking.
You've abstracted whatever the underlying problem that you are trying to solve by modifying the display property away, but there is a good chance that you would be better off with:
#elem.JSOnly {display:none}
with:
<div id="elem" class="JSOnly">
and
document.getElementById('elem').className = ""
or similar.
Try this:
document.getElementById("elem").style.display="block";
You also use jQuery, like this.
<script type="text/javascript">
jQuery('#elem').css('display','');
</script>
You want to also add jquery library.