您的位置：首页 > Web前端 > JavaScript

JS入门小代码

2015-01-15 10:52 204 查看 
<p style="margin-top: 0.5em; margin-bottom: 0.5em; padding-top: 0px; padding-bottom: 0px; font-size: 13px; color: rgb(51, 51, 51); font-family: 'Microsoft Yahei', 'Hiragino Sans GB', Helvetica, 'Helvetica Neue', 微软雅黑, Tahoma, Arial, sans-serif; line-height: 22.390625px; background-color: rgb(208, 214, 217);">一、定义"改变颜色"的函数</p><pre class="code" style="margin-top: 0px; margin-bottom: 0px; padding: 5px 10px; white-space: pre-wrap; word-wrap: break-word; border: 1px solid rgb(204, 204, 204); background-color: rgb(238, 238, 238); font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace; line-height: 1.6em; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; font-size: 13px; word-break: break-word; color: rgb(51, 51, 51);"><strong>提示:</strong>
obj.style.color
<span style="line-height: 1.6em;">obj.style.backgroundColor</span>
二、定义"改变宽高"的函数
提示:
obj.style.width
obj.style.height
三、定义"隐藏内容"的函数
提示:
obj.style.display="none";
四、定义"显示内容"的函数
提示:
obj.style.display="block";
<!DOCTYPE HTML><html><head><meta http-equiv="txttent-Type" txttent="text/html; charset=utf-8" /><title>javascript</title><style type="text/css">body{font-size:12px;}#txt{    height:400px;    width:600px;    border:#333 solid 1px;	padding:5px;}p{	line-height:18px;	text-indent:2em;}</style></head><body>  <h2 id="con">JavaScript课程</H2>  <div id="txt">      <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>        <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>  </div>  <form>  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->    <input type="button" value="改变颜色" onclick="set.changeColor()">      <input type="button" value="改变宽高" onclick="set.changeSize()">    <input type="button" value="隐藏内容" onclick="set.objHide()">    <input type="button" value="显示内容" onclick="set.objShow()">    <input type="button" value="取消设置" onclick="set.offSet()">  </form>  <script type="text/javascript">   var txt=document.getElementById("txt");   var set={    changeColor:function(){        txt.style.color="red";        txt.style.backgroundColor="#ccc";    },    changeSize:function(){        txt.style.width="300px";        txt.style.height="300px";    },    objHide:function(){        txt.style.display="none";    },    objShow:function(){        txt.style.display="block";    },    offSet:function(){        var message=confirm("重置所有设置么？");        if(message==true){            txt.removeAttribute('style');        }    }  }  </script></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航