zoukankan      html  css  js  c++  java

  • JS笔记 入门第四

    小测试:


    注意:取消所有的设定可以直接使用
    1. document.getElementById("txt").removeAttribute("style");
    这个是个神奇的东西.

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
    5. <title>javascript</title>
    6. <style type="text/css">
    7. body{font-size:12px;}
    8. #txt{
    9.     height:400px;
    10.     width:600px;
    11. 	border:#333 solid 1px;
    12. 	padding:5px;}
    13. p{
    14. 	line-height:18px;
    15. 	text-indent:2em;}
    16. </style>
    17. </head>
    18. <body>
    19.   <h2 id="con">JavaScript课程</H2>
    20.   <div id="txt"> 
    21.      <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
    22.         <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
    23.         <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
    24.         <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
    25.   </div>
    26.   <form>
    27.   <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    28.     <input type="button" value="改变颜色" onclick="cgcolor()" />
    29.     <input type="button" value="改变宽高" onclick="cgwh()" />
    30.     <input type="button" value="隐藏内容" onclick="hidetext()">
    31.     <input type="button" value="显示内容" onclick="showtext()">
    32.     <input type="button" value="取消设置" onclick="noconfig()">
    33.   </form>
    34.   <script type="text/javascript">
    35. //定义"改变颜色"的函数
    36.     function cgcolor(){
    37.         var mychar = document.getElementById("txt");
    38.         mychar.style.color="orange";
    39.         mychar.style.backgroundColor="#ccc";
    40.     }
    42. //定义"改变宽高"的函数
    43.     function cgwh(){
    44.         var mychar = document.getElementById("txt");
    45.         mychar.style.width="800px";
    46.         mychar.style.height="200px";
    47.     }
    49. //定义"隐藏内容"的函数
    50.     function hidetext(){
    51.         var mychar = document.getElementById("txt");
    52.         mychar.style.display="none";
    53.     }
    55. //定义"显示内容"的函数
    56.     function showtext(){
    57.         var mychar=document.getElementById("txt");
    58.         mychar.style.display="block";
    60.     }
    62. //定义"取消设置"的函数
    63.     function noconfig(){
    64.         var mychar =confirm("取消上面的设定?")
    65.         if(mychar==true){
    66.             document.getElementById("txt").removeAttribute("style");
    67.         }
    68.         else{
    69.             //do nothing
    70.         }
    71.     }
    74.   </script>
    75. </body>
    76. </html>
  • 相关阅读:
    Autofac-案例
    Autofac-DynamicProxy（AOP动态代理）
    AutoFac注册2-程序集
    MVC添加跨域支持Cros
    redis笔记3-基础知识与常用命令
    Redis笔记2-Redis安装、配置
    Redis笔记-八种数据类型使用场景
    ActionResult源码分析笔记
    .NET UrlRouting原理
    webapi使用ExceptionFilterAttribute过滤器
  • 原文地址：https://www.cnblogs.com/echorep/p/5186252.html
Copyright © 2011-2022 走看看