Menu
When, exactly, do the parameters of a CSS style get assigned to the element?
In the following simple example, I have 2 buttons that control the display of 2 <DIV> areas.
The initial display is as expected: 2 buttons one <DIV> section
All works as expected when the ‘SHOW’ is clicked, even though the initial value of display is ”
When you click the ‘HIDE’ button, nothing happens the first time because the alert returns ”
even though the CSS assignment was ‘none’. Two clicks latter, both work as expected.
When do the CSS class assignments get recognized as it appears in this case that the
display:none is not being recognized until after the JS assignment change?
I don’t understand why the alter on the FIRST click doesn’t return a ‘preSHstatus’ setting
of the initial assignments of the CSS definitions.
Hopefully, I’m making myself clear about this question.
Here’s the code:
[code=php]
<html>
<head>
<title>CSS test</title>
<style type=”text/css”>
#initHide {
display: none;
width:100px;
border:1px solid green;
}
#initShow {
display: block;
width:100px;
border:1px solid red;
}
</style>
<script type=”text/javascript”>
// Toggle.js
function Toggle(Info) {
var CState = document.getElementById(Info);
var preSHstatus = CState.style.display;
if (CState.style.display == “none”) { CState.style.display = “block”; }
else { CState.style.display = “none”; }
var postSHstatus = CState.style.display;
alert(‘Pre status : ‘+preSHstatus+”nPost status: “+postSHstatus);
}
</script>
</head>
<body>
<button onclick=”Toggle(‘initShow’)”>Init Show</button>
<button onclick=”Toggle(‘initHide’)”>Init Hide</button>
<div class=”divS” id=”initShow”>Initially Show</div>
<div class=”divH” id=”initHide”>Initially Hide</div>
</body>
</html>
Thanks for any interest.