2初识JavaScript

1DOM搜索绑带ID
2写上方法
3点击调用方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div { width:200px; height:200px; background:red; display:none; }
</style>
<script>
window.onload = function (){
    var oBtn1 = document.getElementById('show_btn');
    var oBtn2 = document.getElementById('hide_btn');
    var oDiv = document.getElementById('div1');
    var oStrong = document.getElementById('strong1');
    
    oStrong.onclick = show;
    oBtn1.onclick = show;
    
    function show(){
        oDiv.style.display = 'block';
        oDiv.style.width = '300px';
        oDiv.style.background = 'yellow';
    }
    
    oBtn2.onclick = function (){
        oDiv.style.display = 'none';
    };
};
</script>
</head>

<body>

<input id="show_btn" type="button" value="显示" />
<input id="hide_btn" type="button" value="隐藏" />

<strong id="strong1">我也要让它显示~~</strong>

<div id="div1"></div>

</body>
</html>

调试结果

Paste_Image.png
Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,532评论 25 708
  • 张爱玲的文字,好像前清时遗留下来的一枚绣花鞋,精致,华美,却又散发着裹脚布的味道。又像伤口上凝固的血,深深浅浅的猩...
    萧以澈阅读 341评论 0 0
  • 这个她,是琴。 因为有钢的琴,跟随了她千年的名字“琴”之前被加了个字“古”,她的名字就是“古琴”了。她还有很多别致...
    七徽阅读 1,743评论 33 26
  • 当我们使用UITextView时,出现出输入文字时, 输入文字的高度超出UITextView的高度一行时才开始滚动...
    小栗子二号阅读 421评论 0 0