原生js设置div隐藏或者显示_10种JS控制DIV的显示隐藏代码

div隐藏与显示

#menus {

background-color: #c4cff0;

}

function Layer_HideOrShow(cur_div)

{ var current=document.getElementById(cur_div);

if(current.style.visibility=="hidden")

{

current.style.visibility ="visible";

}

else

{

current.style.visibility ="hidden";

}

}

  

====================

无标题文档

居中的DIV

=======================

3.javascript 控制 html元素 显示/隐藏

1。编写js函数

function display(id){

var traget=document.getElementById(id);

if(traget.style.display=="none"){

traget.style.display="";

}else{

traget.style.display="none";

}

}

2. 要显示/隐藏的html元素加上 id 属性

3,添加按钮,链接等触发 js 函数

显示/隐藏

javascript显示隐藏层

广告

function 函数{

if(thisdiv.style.display=='none'){

thisdiv.style.display=""

}

else

thisdiv.style.display="none"

}

你先给div 取个ID=“AA”thisdiv=AA

javascript隐藏/显示表单对象

javascript隐藏/显示表单对象

[SCRIPT language=JavaScript]

function expandIt(el) {

whichEl =document.getElementById(el)

if (whichEl.style.display ==   'none') {

whichEl.style.display   = '';

}

else {

whichEl.style.display   = 'none';

}

}

[/SCRIPT]

el是对象的id,不管是tr或者table等等先设置一下id,然后进行调用。

例:

[a οnclick="expandIt('ttchild'); return false" href="#" ]try it[/a]

[tr id="ttchild"][td width="18"]Example[/td][/tr]

使用时把[]变成<>

javascript控制页面控件隐藏显示的两种方法

javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位

方法一:

document.all["PanelSMS"].style.visibility="hidden";

document.all["PanelSMS"].style.visibility="visible";

方法二:

document.all["PanelSMS"].style.display="none";

document.all["PanelSMS"].style.display="inline";

方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static

方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic

这个方法来我是从一个boblog模板上找到的,其实网络上也可以搜索到;只是网络上不看效果的转载让人难辩代码的错对和方便。用这个方法比用《给zblog再增3个功能:防刷、收缩侧栏、复制加版权》的效果要好,纯css隐藏div会刷新页面,但用js就不会了。

js代码如下,新建一个txt文件,复制进去,保存并修改文件后缀为js(例open.js)即可。我是把这个文件放在zblog的SCRIPT文件夹里,这里js比较多……

程序代码function showhidediv(id){

try{

var sbtitle=document.getElementById(id);

if(sbtitle){

if(sbtitle.style.display=='block'){

sbtitle.style.display='none';

}else{

sbtitle.style.display='block';

}

}

}catch(e){}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/541597.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机工作对身体有害吗,在电脑前长时间工作会对身体有害处吗?

病情分析&#xff1a;目前,电脑对人体生理和心理方面的负面影响已日益受到人们的重视.为此科学使用电脑,减少电脑和网络的危害是十分必要的.指导意见&#xff1a;一是要增强自我保健意识工作间隙注意适当休息,一般来说,电脑操作人员在连续工作1小时后应该休息10分钟左右.并且最…

Java LinkedList getFirst()方法与示例

LinkedList getFirst()方法 (LinkedList getFirst() method) This method is available in package java.util.LinkedList. 软件包java.util.LinkedList中提供了此方法。 This method is used to return the first or initial or beginning element of the linked list. 此方法…

C++第15周(春)项目2 - 用文件保存的学生名单

课程首页在&#xff1a;http://blog.csdn.net/sxhelijian/article/details/11890759。内有完整教学方案及资源链接本程序中须要的相关文件。请到http://pan.baidu.com/s/1qW59HTi下载。【项目2-用文件保存的学生名单】  文件score.dat中保存的是若干名学生的姓名和C课、高数和…

计算机选配 注意事项,选择鼠标注意事项有哪些

选择鼠标注意事项有哪些每台电脑旁边都有了一个忠实的伴侣&#xff0c;那就是“Mouse”--鼠标。选择鼠标最重要的一点就是质量&#xff0c;无论它的功能有多强大、外形多漂亮&#xff0c;如果质量不好那么一切都不用考虑了。那么&#xff0c;选择鼠标注意事项有哪些?笔记本鼠标…

js 验证护照_护照本地策略第2部分| Node.js

js 验证护照In my last article (Passport local strategy section 1 | Node.js), we started the implementation of the passport-local authentication strategy. We also looked at the various requirements to get started with the login form. In this article, we wil…

svn版利用什么技术实现_金葱粉涂料印花利用了什么技术?

金葱粉涂料印花利用了什么技术:金葱粉用涂料而不是用染料来生产印花布已经非常广泛&#xff0c;以致开始把它当作一种独立的印花方式。涂料印花是用涂料直接印花&#xff0c;该工艺通常叫做干法印花&#xff0c;以区别于湿法印花(或染料印花)。通过比较同一块织物上印花部位和未…

网站换服务器需要注意什么问题,网站更换服务器要注意哪些事项

原标题&#xff1a;网站更换服务器要注意哪些事项网站在运营的过程中&#xff0c;出于某种考虑&#xff0c;我们会将网站进行服务器的变更&#xff0c;那么在进行服务器变成过程中&#xff0c;需要注意哪些事项。一、如果是跨服务商更换网站服务器&#xff0c;需要做备案迁移。…

json转string示例_C.示例中的String.Insert()方法

json转string示例C&#xff03;String.Insert()方法 (C# String.Insert() Method) String.Insert() method is used to insert a string in an existence string at specified index and returns a new string. String.Insert()方法用于在指定索引处的存在字符串中插入一个字符…

kafka分区与分组原理_大数据技术-Kafka入门

在大数据学习当中&#xff0c;主要的学习重点就是大数据技术框架&#xff0c;针对于大数据处理的不同环节&#xff0c;需要不同的技术框架来解决问题。以Kafka来说&#xff0c;主要就是针对于实时消息处理&#xff0c;在大数据平台当中的应用也很广泛。大数据学习一般都有哪些内…

mac 电脑找不到服务器 dns 地址,MAC OS下如何快速设置DNS服务器地址

楼主你好&#xff01;介绍以下Mac OS X DNS设置方法&#xff1a;1、点击桌面顶部状态栏里的苹果图标&#xff0c;在菜单里选择“系统偏好设置”。2、点击互联网与无线下的“网络”。3、在网络界面&#xff0c;选中正在联网的网络连接&#xff0c;点击右下角的“高级”选项。4、…

ActiveReports 报表控件官方中文新手教程 (1)-安装、激活以及产品资源

&#xfeff;&#xfeff;本系列文章主要是面向初次接触 ActiveReports 产品的用户&#xff0c;能够帮助您在三天之内轻松的掌握ActiveReports控件的基本用法&#xff0c;包含安装、激活、创建报表、绑定数据源以及公布等内容。本篇文章我们就从安装产品開始带您开启轻松的 Ac…

如何在React Native中使用React JS Hooks?

In my articles, Im going to be using either expo or snack online IDE and android emulator. 在我的文章中&#xff0c;我将使用expo或点心在线IDE和android模拟器。 React Hooks is simply an awesome tool that helps us use states and other react features without w…

华为P40pro 手机云台_2020年目前拍照最好的手机推荐!华为P40 Pro!DXO全球榜首

目前最热门的拍照手机自然是华为P40 Pro&#xff0c;其相机性能直接问鼎DXOMARK手机相机评分榜首。对于拍照要极求高的用户&#xff0c;华为P40 Pro将是一个非常不错的选择。那么&#xff0c;华为P40 Pro除了出色的相机之外&#xff0c;其它方面表现如何呢&#xff1f;下面&…

容器性能比无容器服务器,【译】容器 vs 无服务器(Serverless)

一些历史不久之前&#xff0c;开发&#xff0c;部署和运维还相当复杂。在一开始&#xff0c;运维不仅需要修补程序代码&#xff0c;还要支持物理机器。保持服务器&#xff0c;硬件与软件处于最新状态也是一项艰巨的任务。在2000年代&#xff0c;一个新的模型——架构即服务(Iaa…

Centos 7安装与配置nagios监控(一)

目 录序言(必备知识)一、安装规划1.1系统环境1.2所需软件包二、配置安装环境2.1同步时间2.2禁用SElinux2.3 xftp上传软件包2.4安装邮件服务三、监控主机安装3.1安装nagios的运行环境3.2增加用户3.3安装nagios3.4配置权限3.5安装插件3.6安装nrpe四、远程主机安装4.1配置运行环境…

java字符串删掉子串_如何从Java中的列表中删除子列表?

java字符串删掉子串从列表中删除子列表 (Removing SubList from a List) Suppose, we have a list of few elements like this, 假设我们列出了一些这样的元素&#xff0c; list [10,20,30,40,50]From the list, we have to delete a sub list between sourcing_index (inclu…

备份linux系统报错_Linux 系统如何快速入门?分享民工哥总结的经验

大家好&#xff0c;我是民工哥。认识或熟悉我的人都知道&#xff0c;是做运维出身的&#xff0c;所以&#xff0c;很多时候&#xff0c;有很多朋友喜欢问我一些有关运维的问题&#xff0c;比如&#xff1a;我应该如何入门Linux系统运维&#xff1f;Linux系统运维到底需要学哪些…

pe联想服务器装系统教程视频,演示联想电脑u盘重装系统xp教程

联想电脑U盘重装XP系统的方法很多朋友询问&#xff0c;其实现在很多电脑已经不支持XP系统的安装了&#xff0c;如果你的联想电脑是近几年购买的&#xff0c;还是安装win10系统比较保险。当然联想电脑安装系统过程中遇到问题也可以联系人工客服。联想电脑如何使用U盘重装系统XP呢…

TCP Socket 粘包

&#xfeff;&#xfeff;这两天看csdn有一些关于socket粘包&#xff0c;socket缓冲区设置的问题。发现自己不是非常清楚&#xff0c;所以查资料了解记录一下&#xff1a; 一两个简单概念长连接与短连接&#xff1a;1.长连接 Client方与Server方先建立通讯连接。连接建立后不断…

离散数学和组合数学什么关系_关系类型| 离散数学

离散数学和组合数学什么关系关系类型 (Types of Relation) There are many types of relation which is exist between the sets, 集合之间存在许多类型的关系&#xff0c; 1. Universal Relation 1.普遍关系 A relation r from set a to B is said to be universal if: R A…