利用JavaScript的if语句判断元素显示隐藏

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    #div1 {
        width: 100px;
        height:100px;
        background: red;
        display: none;
    }
</style>
<script>
    function showhide(){
        var odiv=document.getElementById(‘div1‘);
        if(odiv.style.display==‘block‘)
            {
                odiv.style.display=‘none‘;
            }
        else{
            odiv.style.display=‘block‘;
        }
    }
</script>
</head>

<body>
<input type="button" value="显示隐藏" onClick="showhide()" />
<div id="div1">

</div>
</body>
</html>

时间： 2024-10-13 03:17:51

利用JavaScript的if语句判断元素显示隐藏的相关文章

JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写JavaScript之前看到的效果: 实现后的效果图: 这个就是我们现在要做的效果. 1.背景: 我们在about.html页面中写了一个ul列表

JS-004-JavaScript 操作常见 web 元素之四-判断元素显示状态

在日常的 web 编程或 UI自动化脚本编写过程中,经常会遇到判断页面元素的显示状态,以对应的执行相应的操作.此文主要以 js 判断页面元素的存在状态为例,简单叙述一下 js 是如何判断元素的显示状态的,敬请小主们参阅.若有不足之处,敬请大神们不吝指正,不胜感激! 多不言述,小二上码咯. 以下为简单的 HTML 源码,如下所示: 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content=&quo

Js - 判断元素是否隐藏、显示

判断元素是否隐藏.显示的方法,需要的朋友可以参考下 : 1.通过判断元素display属性状态值来实现 console.log($('div').css("display")); // inlineif($('div').css("display") != 'none') { console.log('aaaaa'); // aaaaa $('div').hide(); console.log($('div').css(&qu

如何利用一条简单语句判断一个整数是否为2的整数次幂

在写代码的过程中可能会遇到判断一个整数是否为2的整数次幂的问题,除了枚举的方法,还可以利用二进制的知识进行简单快速判断. 2的整数次幂用二进制表示只存在一个1和n个0,因此,我们利用位运算&判断一个整数a与a-1的&是否为0即可.具体代码如下. 代码非常简洁. 12345678910111213141 大专栏如何利用一条简单语句判断一个整数是否为2的整数次幂51617 #include<bits/stdc++.h>using namespace std;typedef lo

元素显示隐藏的9种思路

× 目录 [1]display [2]visibility [3]hidden[4]opacity[5]overflow[6]clip[7]transform[8]覆盖[9]偏移前面的话在网页制作中,元素的显示隐藏是非常常见的需求.本文将介绍元素显示隐藏的9种思路思路一: display 对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline.inline-b

Jquery not选择器实现元素显示隐藏

初初认识jQuery的not选择器,想要实现的功能是,点击第一个div,显示第二个div,点击第一个div以外的地方,隐藏第二个div. 具体代码如下: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(

jquery判断元素是否隐藏的多种方法

第一种:使用CSS属性复制代码代码如下: var display =$('#id').css('display'); if(display == 'none'){ alert("被你发现了,我是隐藏的啦!"); } 第二种:使用jquery内置选择器假设我们页面有这么个标签, 复制代码代码如下: <div id="test">< p>仅仅是测试所用</p>< /div> 那么,我们可以用以下语句来判断id

jq 筛选选择器，方法，隐式迭代元素显示隐藏淡入淡出上拉下拉动画类名操作以及样式

jQuery 地址:https://jquery.com/ 历史版本:http://code.jquery.com/ 1.x:兼容 IE678 低版本浏览器 2.x:不兼容 IE678 低版本浏览器 3.x:不兼容 IE678 低版本浏览器,官方主要维护版本入口函数 // 一下两种入口函数相当于原生中的 DOMContentLoaded $(function () { /* DOM加载完成的入口*/ }) $(document).ready(function(){ /* DOM加载完成的入口

利用javascript获取并修改伪元素的值

虽然标题里写的是伪元素,不过这篇文章主要是说::before和::after,其余几个伪元素(::first-letter.::first-line.::selection等)由于没有content属性,所以本文一笔带过,其实方法是一样的.伪元素的重点在于一个伪,虽然它们可以被浏览器渲染引擎识别并正确渲染,然而伪元素本身并不是DOM元素,所以无法被js直接操作--因此任何基于JS直接选取DOM元素的CSS更改方法对伪元素都不起作用.(JQ看似万能,这个问题上是直接就栽了.因为JQ的选择符都是基于