Problem with CSS property visibility from Javascript
In the code below, the CSS display element is not being read by the Javascript and I don't understand why. After putting in a debugger statement I saw display was empty even though I set it in the CSS. I've been staring at it for a while, so I'm probably missing something obvious.
<html>
<head>
<style type="开发者_StackOverflow中文版text/css">
div#image{ display: none; }
div#url { display: none; }
</style>
<script type="text/javascript">
function toggleVisibility(id) {
debugger;
var imageStyle = document.getElementById('image').style;
var urlStyle = document.getElementById('url').style;
alert(document.getElementById("image").style.display); // debug for stack
if ( id == "image" ) {
if ( imageStyle.display == "none" ) {
imageStyle.display = "block";
urlStyle.display = "none";
}
}
if ( id == "url" ) {
if ( urlStyle.display == "none" ) {
urlStyle.display = "block";
imageStyle.display = "none";
}
}
}
</script>
</head>
<body>
<form method="post" action="create.php">
<input type="hidden" name="formType" value="create">
<input type="radio" name="type" value="image" onClick="toggleVisibility('image');"> Image <input type="radio" name="type" value="url" onClick="toggleVisibility('url');"> URL
<div id="image">
Image div
</div>
<div id="url">
URL div
</div>
</form>
</body>
</html>
Demo
You can't read css styles of attributes like that but an alternative is to check for an empty value and treat it like display:none
if ( id == "image" ) {
if ( imageStyle.display == "none" || !imageStyle.display) {
imageStyle.display = "block";
urlStyle.display = "none";
}
}
if ( id == "url" ) {
if ( urlStyle.display == "none" || !urlStyle.display) {
urlStyle.display = "block";
imageStyle.display = "none";
}
}
That's because you need to get the computed style of the element.
You can do that using this function:
function getStyle( elem, name ) {
var value;
if (elem.currentStyle) {
value = elem.currentStyle[name];
} else if (window.getComputedStyle) {
value = document.defaultView.getComputedStyle(elem,null).getPropertyValue(name);
}
return value;
}
I've also simplified part of your JS, so you probably wouldn't need to check the style of the element anyway:
if ( id == "image" ) {
imageStyle.display = "block";
urlStyle.display = "none";
}
if ( id == "url" ) {
urlStyle.display = "block";
imageStyle.display = "none";
}
Demo here
JavaScript doesn't natively read styles from elements as set in a style sheet. I think JQuery and other libraries do. In order to get this to work you could et the style attribute on the actual tag itself:
<div id="image" style="display:none">
Image div
</div>
<div id="url" style="display:none">
URL div
</div>
Or, check for an empty value and use that as "none"
The style property on HTMLElement instances only reflects the information for the inline styles for that element (e.g., the style attribute on the tag). To get the computed style of an element, which includes any applied by CSS rules, you have to use getComputedStyle (on browsers that support it) or currentStyle (on browsers that support it).
Slightly off-topic: Reliably getting the computed style for an element is one of the (many) areas where a good JavaScript library can save you a lot of time and trouble, whether it's jQuery, Prototype, YUI, Closure, or any of several others. It's not just the getComputedStyle / currentStyle dichotomy, but various browser quirks as well. Using a good library, you can leverage the huge amount of work and research others have done, so you can concentrate on your specific work. Usually. :-)
For instance, using jQuery you could find out whether the element with the id "image" was visible (which can be affected by display: none, visibility: hidden, etc.) like this:
if ($("#image").visible()) {
// Yes it is
}
Or if you want to check a specific computed style:
if ($("#image").css("display") === "none") {
// It has display: none, either directly or by rule
}
Other libraries will have similar functionality.
加载中,请稍侯......
精彩评论