js中style.display="" 无效的解决方案

看下面一段代码：

<style>

 #name
 {

     display:none;

 }

</style>

</head>

<body>

<div id="name" >

My name is smile.

</div>

</body>

</html>

<script>

window.onload=function(){

document.getElementById('name').style.display="";

 alert("test");

}

</script>

css定义了id為name的div为隐藏，而我们在页面加载完成之后用js控制该id显示出来，这样写有错么？
木有错？可是为什么界面上还是空白呢？
记得不？还有一个用法是xxx.style.display="block" 那我们试试吧，
呜呼，竟然显示了！！！

那我们查看一下style.display=""和style.display="block"用法有什么不同吧。

其实，这两个的最大区别是block是块显示的，所以会换行，那么既然就这么点区别，为什么在本例子中一个可以显示，一个不行呢?困扰。

好吧，这个问题先放开，我们先看现在这个问题中我们如何解决，除了用style.display="block"可以解决外，还有另外一种办法就是：

<div id="name" style="display:none" >

My name is smile.

</div>

<script>

     document.getElementById('name').style.display="";

</script>

就是把id为name的样式用style这样内置到标签内，这样不管用display=""还是display="block"就都可以正常显示啦!!!

你可能感兴趣的:(display)

  • 《C++ Primer Plus》学习笔记 2.1.3 C++预处理器和iostream文件 weixin_33859844 c/c++
    程序清单2-1myfirst.cpp//myfirst.cpp--displaysamessage#include//aPREPROCESSORdirectiveintmain()//functionheader{//startoffunctionbodyusingnamespacestd;//makedefinitionsvisiblecoutusingnamespacestd;可使用其他代码替
  • 原生JS和CSS，HTML实现开屏弹窗 QTX18730 csshtmljavascript
    开屏弹窗常应用于打开游戏，或者打开网站的时候，跳出来在正中间，来显示一些信息，并可以设置今日不再显示CSS代码如下#box{width:100vw;height:100vh;background-color:rgba(0,0,0,0.2);position:relative;display:none;}.alerts{width:250px;height:400px;background-colo
  • binder service 找不到会delay 5秒 惠(xi)斌 framework基础知识点android
    一.描述在做项目裁剪时,发现了一个问题.当按power时,灭屏和亮屏特别慢.至少需要5秒.01-1114:16:24.53310271130IDisplayPowerController2[0]:Unblockedscreenonafter6256ms二.分析抓取systemserver的dump信息.发现一直处于blocked状态."android.display"prio=5tid=16Blo
  • 页面中指定元素进入全屏&&退出全屏 SarinaDu csscss3html
    可运行demoFullscreenDivExample/*设置div的样式*/#fullscreenDiv{width:300px;/*宽度*/height:200px;/*高度*/background-color:lightblue;/*背景颜色*/display:flex;/*使用flex布局*/justify-content:center;/*水平居中*/align-items:center
  • 蓝桥杯web第三天 蒟蒻的贤 css
    展开扇子题目，#box:hover#item1{transform:rotate(-60deg);}当悬浮在父盒子，子元素旋转webkitdisplay:-webkit-box：将元素设置为弹性伸缩盒子模型。-webkit-box-orient:vertical：设置伸缩盒子的子元素排列方式为垂直排列。overflow:hidden：隐藏超出元素容器的内容。text-overflow:ellips
  • SpringBoot项目报错解决：“Error starting ApplicationContext. To display the conditions report re-run ...” m0_74823239 面试学习路线阿里巴巴springboot数据库sql
    启动项目文件时老启动不了一直报下面的我尝试了以下网上找到的方法好几种1.我先看了配置错误：可能是application.properties或application.yml文件中的配置项有误的原因吧（我发现并没有什么错误）2.依赖冲突：项目依赖的库之间难道存在版本依赖冲突吗没有pass3.Bean初始化异常：某个Bean的初始化过程中抛出了异常,我这还报一个错误将xxxBeantoString(一
  • CSS隐藏元素的方式 林的快手 HTML+CSScsshtml前端javascript开发语言chrome
    方式一：visibility属性visibility属性默认值是show，如果设置为hidden，元素会隐藏。元素看不见了，还占有原来的位置（元素的大小依然保持）。方式二：display属性设置display:none，就可以让元素隐藏。彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。.隐藏元素的方式.box{width:400px;height:400px;}.box1{backgrou
  • CSS实现图片缺角效果 凉风听雪 CSS炫酷使用css前端css3html
    效果：源码：123body{margin:0;padding:0;background:#f9f9f9;display:flex;align-items:center;justify-content:center;height:100vh;}.row{display:flex;padding:30px;gap:30px;flex-wrap:wrap;background:inherit;}.box
  • C++ 中的继承详解(下) kk\n c++开发语言
    目录5、继承与友元(了解)6、继承与静态成员7、复杂的菱形继承及菱形虚拟继承(了解)8、继承的总结和反思5、继承与友元(了解)友元关系不能继承，也就是说基类友元不能访问子类私有和保护成员。举个栗子：classStudent6;classPerson6{public:friendvoidDisplay(constPerson6&p,constStudent6&s);protected:string_
  • CSS从入门到精通 cgblpx 前端开发全家桶-7天集训csshtmlcss3
    文章目录CSS技术什么是CSSCSS的用法选择器标签名选择器class选择器id选择器分组选择器属性选择器盒子模型margin（外边距）border（边框）padding（内边距）元素类型的补充块级元素行内元素行内块元素永和门店系统用户注册练习CSS技术dy同名:cgblpx弹性布局:水平垂直都居中display:flex;justify-content:center;align-items:ce
  • uniapp开发微信小程序时实现文字转语音播报 播报时一个字展示一个字 并有暂停语音的功能 朱留坤 uni-app微信小程序小程序
    {{isPlaying?'暂停':'播放'}}{{displayedText}}varplugin=requirePlugin("WechatSI")exportdefault{data(){return{text:'需要展示的文字',displayedText:'',isPlaying:false,index:0,intervalId:null,audioContext:null，plugin：
  • avue富文本编辑器如何保证上传图片正常 R-sz java前端javascript
    {label:"内容",prop:"content",component:'AvueUeditor',action:"/api/blade-resource/oss/endpoint/put-file",propsHttp:{res:"data",url:"link",},hide:true,viewDisplay:false,minRows:6,span:24,rules:[{required:
  • C++模板与STL七日斩：从工业编程到高效数据管理（工业项目） AI少女小鹿 算法前端服务器c++
    模板如何提升工业代码复用性实战项目：创建通用【工业设备容器】模板类类模板的定义与实例化模板参数默认值#include#includeusingnamespacestd;templateclassIndustrialContainer{private:Tdata;public:IndustrialContainer(Td):data(d){}voiddisplay(){coutic1(100);//
  • haclon模板匹配 CallZhang210 haclon视觉检测
    *打开窗口dev_open_window(0,0,512,512,'black',WindowHandle)*显示图像（用于创建模板的图像）read_image(Image,'D:/训练照片/4.png')dev_display(Image)*在图像上手动绘制ROI，即选择绘制的模板区域draw_rectangle1(WindowHandle,Row1,Column1,Row2,Column2)*
  • 微信小程序-路线规划功能 lvbb66 微信小程序notepad++小程序
    wxmlwxss/*pages/atlas/index.wxss*/.container{background-color:#ffffff;padding-bottom:10px;}/*顶部导航栏*/.top{width:100%;height:90px;color:#636363;display:flex;top:0;position:fixed;font-size:14px;text-alig
  • Web网页开发——水果忍者 大道归简 AI模型探索前端javascripthtml
    1.介绍复刻经典小游戏——水果忍者2.预览3.代码FruitNinjaWebDemobody{margin:0;padding:0;overflow:hidden;background-color:#333;font-family:Arial,sans-serif;touch-action:none;}#gameCanvas{background-color:#87CEEB;display:blo
  • SVG黑科技微信排版『左右视差滚动』模板代码 懂点君 模板代码SVG公众号互动排版前端html5javascriptcsschrome
    模板代码
  • COMPX322-25A Asynchronous Event Viewer 后端
    COMPX322-25AAssignmentOneDueDate:MondayMarch24th,10amAsynchronousEventViewerPARTONEForthiscourseworkyouaretoimplementawebapplicationthatdisplaysinformationaboutlocalevents.Yourimplementationwillrequir
  • flex布局子元素间距问题 萧寂173 csscsscss3前端
    Document.father{display:flex;flex-wrap:wrap;gap:20px;/*左右间距和上下间距都是20px*/}.son{width:100px;height:100px;background-color:red;}.father2{display:flex;flex-wrap:wrap;gap:50px20px;/*上下间距50px,左右间距20px*/}.so
  • 【css】字体的镜面反射 依轩cc 基础知识知识梳理css前端javascript
    element.style{display:block;-webkit-box-reflect:below0em-webkit-gradient(linear,0%0%,0%100%,from(rgba(0,0,0,0)),to(rgba(255,255,255,0.1)));visibility:visible;}
  • COMPX322-25A Asynchronous Event Viewer 后端
    COMPX322-25AAssignmentOneDueDate:MondayMarch24th,10amAsynchronousEventViewerPARTONEForthiscourseworkyouaretoimplementawebapplicationthatdisplaysinformationaboutlocalevents.Yourimplementationwillrequir
  • css 实现图片3D旋转效果（那些年写过的转圈圈） Venus865 css前端
    css实现图片旋转效果还是很容易的，不说废话直接上，先看下效果实现起来也不复杂，主要用到的css样式有：transform-style,transform,animation,-webkit-box-reflect，会在代码里一一介绍，如下.container{width:800px;height:600px;border:1pxsolidrgba(0,0,0,0.1);display:flex;
  • WPS JS宏实现批量删除工作表功能 神马浮云呀 wpsjavascript
    这里用到了Delete()函数，但是删除工作表时会出现一个问题，就是如果sheet表里有数据，就会激发系统保护功能，弹出警告信息提示框，从而打断批量删除。//批量删除工作簿中除名为"XXX"之外的所有工作表functionDeleteSh(){//关闭屏幕刷新和警告弹窗with(Application){ScreenUpdating=false;DisplayAlerts=false;}for(v
  • CSS实现一张简易的贺卡 StarPlatinum2 简单的CSS程序css前端
    效果当你把鼠标移至贺卡上时，贺卡会缓慢打开。代码如下Document*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background:#2e3c50;}.card{width:300px
  • 项目实战--网页五子棋（游戏大厅）(3) Ting-yu javamavenjava-eeintellij-idea
    我们的游戏大厅界面主要需要包含两个功能，一是显示用户信息，二是匹配游戏按钮1.页面实现hall.html游戏大厅五子棋开始匹配hall.css.container{height:calc(100%-50px);display:flex;justify-content:center;align-items:center;}.container.dialog{height:350px;width:29
  • VScode快捷键 钟bug vscode编辑器
    目录前言常用General基础编辑Basicediting导航Navigation搜索和替换Searchandreplace多光标和选择Multi-cursorandselection丰富的语言编辑Richlanguagesediting编辑器管理Editormanagement文件管理Filemanagement显示Display调试Debug集成终端Integratedterminal总结前言
  • MacOS开启HIDPI的几种方案 AWS加油站 开源macos
    BetterDisplay是一个功能丰富的显示管理工具，可以为macOS提供自定义分辨率、XDR/HDR额外亮度、虚拟屏幕、画中画、显示断开、显示和EDID覆盖等功能。以下是安装和使用BetterDisplay的指南：下载和安装：访问BetterDisplayGitHub页面。下载最新的发布版本。打开下载的.dmg文件并将BetterDisplay拖到应用程序文件夹中。启动BetterDispla
  • flex布局自定义一行几栏,靠左对齐===grid布局 Bunury Css前端javascripthtml
    模板12221222122212221222122212221222样式.content{width:70%;margin:auto;display:flex;flex-wrap:wrap;padding:30px;background-color:skyblue;.item{/*去掉两边间隙总60px*/flex:00calc((100%-60px)/3);height:120px;backgr
  • 前端排序算法完全指南：从理论到实践 念九_ysl 算法javascript开发语言ecmascript算法
    前端排序算法终极指南.container{max-width:1000px;margin:0auto;padding:20px;}.demo-container{margin:30px0;border:1pxsolid#eee;padding:20px;}.bars-wrapper{height:200px;display:flex;align-items:flex-end;gap:2px;mar
  • Antd使用日期RangePicker框，实现左侧有时间区间选择 本月、上月、过去7天、过去30天等 孜然卷k css前端
    产品要求：在原有日期框的左侧，添加本月、上月、过去7天、过去30天等选项。看Antd组件RangePicker：只存在底下的选择采用CSS去改变样式达到左侧展示的需求:global{.ant-calendar-panel{display:flex;}}效果：在详细的去控制一下元素样式属性：记得给到RangePicker的dropdownClassName属性:global{.ant-calenda
  • ViewController添加button按钮解析。（翻译） 张亚雄 c
    <div class="it610-blog-content-contain" style="font-size: 14px"></div>//  ViewController.m //  Reservation software // //  Created by 张亚雄 on 15/6/2.
  • mongoDB 简单的增删改查 开窍的石头 mongodb
       在上一篇文章中我们已经讲了mongodb怎么安装和数据库/表的创建。在这里我们讲mongoDB的数据库操作       在mongo中对于不存在的表当你用db.表名 他会自动统计 下边用到的user是表明，db代表的是数据库       添加(insert):
  • log4j配置 0624chenhong log4j
    1) 新建java项目 2) 导入jar包，项目右击，properties—java build path—libraries—Add External jar，加入log4j.jar包。 3) 新建一个类com.hand.Log4jTest package com.hand; import org.apache.log4j.Logger; public class
  • 多点触摸(图片缩放为例) 不懂事的小屁孩 多点触摸
    多点触摸的事件跟单点是大同小异的，上个图片缩放的代码，供大家参考一下 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener
  • 有关浏览器窗口宽度高度几个值的解析 换个号韩国红果果 JavaScripthtml
    1 元素的 offsetWidth 包括border padding  content  整体的宽度。 clientWidth  只包括内容区 padding 不包括border。 clientLeft =  offsetWidth -clientWidth  即这个元素border的值 offsetLeft  若无已定位的包裹元素
  • 数据库产品巡礼：IBM DB2概览 蓝儿唯美 db2
    IBM DB2是一个支持了NoSQL功能的关系数据库管理系统，其包含了对XML，图像存储和Java脚本对象表示（JSON）的支持。DB2可被各种类型的企 业使用，它提供了一个数据平台，同时支持事务和分析操作，通过提供持续的数据流来保持事务工作流和分析操作的高效性。 DB2支持的操作系统 DB2可应用于以下三个主要的平台:   工作站，DB2可在Linus、Unix、Windo
  • java笔记5 a-john java
    控制执行流程： 1，true和false    利用条件表达式的真或假来决定执行路径。例：（a==b）。它利用条件操作符“==”来判断a值是否等于b值，返回true或false。java不允许我们将一个数字作为布尔值使用，虽然这在C和C++里是允许的。如果想在布尔测试中使用一个非布尔值，那么首先必须用一个条件表达式将其转化成布尔值，例如if(a!=0)。 2，if-els
  • Web开发常用手册汇总 aijuans PHP
    一门技术，如果没有好的参考手册指导,很难普及大众。这其实就是为什么很多技术，非常好，却得不到普遍运用的原因。 正如我们学习一门技术，过程大概是这个样子： ①我们日常工作中，遇到了问题，困难。寻找解决方案，即寻找新的技术； ②为什么要学习这门技术？这门技术是不是很好的解决了我们遇到的难题，困惑。这个问题，非常重要，我们不是为了学习技术而学习技术，而是为了更好的处理我们遇到的问题，才需要学习新的
  • 今天帮助人解决的一个sql问题 asialee sql
                今天有个人问了一个问题，如下： type     AD      value          A  
  • 意图对象传递数据 百合不是茶 android意图IntentBundle对象数据的传递
    学习意图将数据传递给目标活动; 初学者需要好好研究的       1,将下面的代码添加到main.xml中    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/
  • oracle查询锁表解锁语句 bijian1013 oracleobjectsessionkill
    一.查询锁定的表 如下语句，都可以查询锁定的表 语句一： select a.sid, a.serial#, p.spid, c.object_name, b.session_id, b.oracle_username, b.os_user_name from v$process p, v$s
  • mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］ 征客丶 mysqlosx
    场景：在 mac osx 10.10 下安装 mysql 5.6 的二进制文件。 环境：mac osx 10.10、mysql 5.6 的二进制文件 步骤：[所有目录请从根“/”目录开始取，以免层级弄错导致找不到目录] 1、下载 mysql 5.6 的二进制文件，下载目录下面称之为 mysql5.6SourceDir； 下载地址：http://dev.mysql.com/downl
  • 分布式系统与框架 bit1129 分布式
    RPC框架 Dubbo 什么是Dubbo   Dubbo是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案。其核心部分包含:    远程通讯: 提供对多种基于长连接的NIO框架抽象封装，包括多种线程模型，序列化，以及“请求-响应”模式的信息交换方式。    集群容错: 提供基于接
  • 那些令人蛋痛的专业术语 白糖_ springWebSSOIOC
    spring 【控制反转(IOC)/依赖注入(DI)】： 由容器控制程序之间的关系，而非传统实现中，由程序代码直接操控。这也就是所谓“控制反转”的概念所在：控制权由应用代码中转到了外部容器，控制权的转移，是所谓反转。 简单的说：对象的创建又容器(比如spring容器)来执行，程序里不直接new对象。 Web 【单点登录(SSO)】：SSO的定义是在多个应用系统中，用户
  • 《给大忙人看的java8》摘抄 braveCS java8
    函数式接口：只包含一个抽象方法的接口 lambda表达式：是一段可以传递的代码       你最好将一个lambda表达式想象成一个函数，而不是一个对象，并记住它可以被转换为一个函数式接口。 事实上，函数式接口的转换是你在Java中使用lambda表达式能做的唯一一件事。   方法引用：又是要传递给其他代码的操作已经有实现的方法了，这时可以使
  • 编程之美-计算字符串的相似度 bylijinnan java算法编程之美
    public class StringDistance { /** * 编程之美 计算字符串的相似度 * 我们定义一套操作方法来把两个不相同的字符串变得相同，具体的操作方法为： * 1.修改一个字符（如把“a”替换为“b”）; * 2.增加一个字符（如把“abdd”变为“aebdd”）; * 3.删除一个字符（如把“travelling”变为“trav
  • 上传、下载压缩图片 chengxuyuancsdn 下载
    /** * * @param uploadImage --本地路径(tomacat路径) * @param serverDir --服务器路径 * @param imageType --文件或图片类型 * 此方法可以上传文件或图片.txt,.jpg,.gif等 */ public void upload(String uploadImage,Str
  • bellman-ford(贝尔曼-福特)算法 comsci 算法F#
    Bellman-Ford算法(根据发明者 Richard Bellman 和 Lester Ford 命名)是求解单源最短路径问题的一种算法。单源点的最短路径问题是指：给定一个加权有向图G和源点s，对于图G中的任意一点v，求从s到v的最短路径。有时候这种算法也被称为 Moore-Bellman-Ford 算法，因为 Edward F. Moore zu 也为这个算法的发展做出了贡献。 与迪科
  • oracle ASM中ASM_POWER_LIMIT参数 daizj ASMoracleASM_POWER_LIMIT磁盘平衡
    ASM_POWER_LIMIT 该初始化参数用于指定ASM例程平衡磁盘所用的最大权值，其数值范围为0~11，默认值为1。该初始化参数是动态参数，可以使用ALTER  SESSION或ALTER  SYSTEM命令进行修改。示例如下： SQL>ALTER  SESSION  SET   Asm_power_limit=2;
  • 高级排序:快速排序 dieslrae 快速排序
    public void quickSort(int[] array){ this.quickSort(array, 0, array.length - 1); } public void quickSort(int[] array,int left,int right){ if(right - left <= 0
  • C语言学习六指针_何谓变量的地址 一个指针变量到底占几个字节 dcj3sjt126com C语言
    # include <stdio.h> int main(void) { /* 1、一个变量的地址只用第一个字节表示 2、虽然他只使用了第一个字节表示，但是他本身指针变量类型就可以确定出他指向的指针变量占几个字节了 3、他都只存了第一个字节地址，为什么只需要存一个字节的地址，却占了4个字节，虽然只有一个字节， 但是这些字节比较多，所以编号就比较大，
  • phpize使用方法 dcj3sjt126com PHP
    phpize是用来扩展php扩展模块的，通过phpize可以建立php的外挂模块,下面介绍一个它的使用方法,需要的朋友可以参考下 安装（fastcgi模式）的时候，常常有这样一句命令： 代码如下: /usr/local/webserver/php/bin/phpize   一、phpize是干嘛的？ phpize是什么？ phpize是用来扩展php扩展模块的，通过phpi
  • Java虚拟机学习 - 对象引用强度 shuizhaosi888 JAVA虚拟机
    本文原文链接：http://blog.csdn.net/java2000_wl/article/details/8090276 转载请注明出处！ 无论是通过计数算法判断对象的引用数量，还是通过根搜索算法判断对象引用链是否可达，判定对象是否存活都与“引用”相关。 引用主要分为 ：强引用(Strong Reference)、软引用(Soft Reference)、弱引用(Wea
  • .NET Framework 3.5 Service Pack 1（完整软件包）下载地址 happyqing .net下载framework
      Microsoft .NET Framework 3.5 Service Pack 1（完整软件包）  http://www.microsoft.com/zh-cn/download/details.aspx?id=25150 Microsoft .NET Framework 3.5 Service Pack 1 是一个累积更新，包含很多基于 .NET Framewo
  • JAVA定时器的使用 jingjing0907 javatimer线程定时器
    1、在应用开发中，经常需要一些周期性的操作，比如每5分钟执行某一操作等。 对于这样的操作最方便、高效的实现方式就是使用java.util.Timer工具类。 privatejava.util.Timer timer; timer = newTimer(true); timer.schedule( newjava.util.TimerTask() { public void run()
  • Webbench 流浪鱼 webbench
    首页下载地址 http://home.tiscali.cz/~cz210552/webbench.html Webbench是知名的网站压力测试工具，它是由Lionbridge公司（http://www.lionbridge.com）开发。 Webbench能测试处在相同硬件上，不同服务的性能以及不同硬件上同一个服务的运行状况。webbench的标准测试可以向我们展示服务器的两项内容：每秒钟相
  • 第11章 动画效果（中） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • windows下制作bat启动脚本. sanyecao2314 javacmd脚本bat
    java -classpath C:\dwjj\commons-dbcp.jar;C:\dwjj\commons-pool.jar;C:\dwjj\log4j-1.2.16.jar;C:\dwjj\poi-3.9-20121203.jar;C:\dwjj\sqljdbc4.jar;C:\dwjj\voucherimp.jar com.citsamex.core.startup.MainStart
  • Java进行RSA加解密的例子 tomcat_oracle java
    加密是保证数据安全的手段之一。加密是将纯文本数据转换为难以理解的密文；解密是将密文转换回纯文本。 　　数据的加解密属于密码学的范畴。通常，加密和解密都需要使用一些秘密信息，这些秘密信息叫做密钥，将纯文本转为密文或者转回的时候都要用到这些密钥。 　　对称加密指的是发送者和接收者共用同一个密钥的加解密方法。 　　非对称加密(又称公钥加密)指的是需要一个私有密钥一个公开密钥，两个不同的密钥的
  • Android_ViewStub 阿尔萨斯 ViewStub
    public final class ViewStub extends View java.lang.Object android.view.View android.view.ViewStub 类摘要： ViewStub 是一个隐藏的，不占用内存空间的视图对象，它可以在运行时延迟加载布局资源文件。当 ViewSt
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他