[英]Javascript change display CSS
Im completely new to Javascript, this is what i want: Guy clicks on an element, so i trigger an onclick
and i want to run a JS function, all clear so i need a JS function, what this function needs to do: 我是全新的Javascript,这就是我想要的:Guy点击一个元素,所以我触发一个onclick
,我想运行一个JS函数,所有清楚所以我需要一个JS函数,这个函数需要做什么:
#mobilemenu
is block or none. 检查元素#mobilemenu
的显示#mobilemenu
为block或none。 What i found so far was this: 到目前为止我发现的是:
function Change(){
document.getElementById("mobilemenu").style.display = "block"; }
But i am stuck on checking if it is currently block or none. 但我坚持检查它是否是当前阻止或没有。 I am kinda new to JS so maybe it is super easy (as i think) but i can't find a proper tutorial or some examples. 我是JS的新手,所以也许它非常容易(我认为),但我找不到合适的教程或一些例子。
Thanks in advance! 提前致谢!
Just add an if-else
. 只需添加一个if-else
。
function Change(){
var displayVal = document.getElementById("mobilemenu").style.display;
if (displayVal == "block")
document.getElementById("mobilemenu").style.display = "none";
else if (displayVal == "none")
document.getElementById("mobilemenu").style.display = "block";
}
Here is a Fiddle: http://jsfiddle.net/vaa9goLe/ 这是一个小提琴: http : //jsfiddle.net/vaa9goLe/
You can use an if
/ else
statement to check whether the element is displayed, and then show or hide it accordingly: 您可以使用if
/ else
语句检查元素是否显示,然后相应地显示或隐藏它:
function Change() {
/* Put the mobilemenu into a variable */
var mobilemenu = document.getElementById("mobilemenu");
/* Check the display property of the element's style object */
if (mobilemenu.style.display !== "block") {
/* The element isn't display: block; so show it */
mobilemenu.style.display = "block";
} else {
/* The element is display: block; so hide it */
mobilemenu.style.display = "none";
}
}
Also, you can use getComputedStyle
in case your element doesn't have initial display
value to ensure your function will always work. 此外,您可以使用getComputedStyle
,以防您的元素没有初始display
值,以确保您的函数始终有效。
var element = document.getElementById('btn');
element.onclick = function() {
var mydiv = document.getElementById('mydiv'),
isVisible = (mydiv.currentStyle || window.getComputedStyle(mydiv, '')).display == 'block';
if (isVisible){
mydiv.style.display = 'none';
} else {
mydiv.style.display = 'block';
}
};
jsfiddle: 的jsfiddle:
This may help you 这可能对你有所帮助
<div id="mobilemenu" style="display:block"></div>
<script type="text/javascript">
function Change(){
var contentId = document.getElementById("mobilemenu");
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
If the div had style value anything other than block
or none
, the following code should do nothing and preserve the original style value. 如果div的样式值不是block
或none
,则以下代码不应执行任何操作并保留原始样式值。
function Change(){
document.getElementById("mobilemenu").style.display = ( document.getElementById("mobilemenu").style.display === "block" ) ? "none" : ( document.getElementById("mobilemenu").style.display === "none" ) ? "block" : document.getElementById("mobilemenu").style.display ;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.