<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="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" class="cc">JavaScript课程</H2>
  <div id="txt">
     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
        <p class="hid">2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
  <form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onclick="changecolor()">  
    <input type="button" value="改变宽高" onclick="changewh()">
    <input type="button" value="隐藏内容"  onclick="changecon()">
    <input type="button" value="显示内容" onclick="showcon()">
    <input type="button" value="取消设置" onclick="cancel()">
  </form>
  <script type="text/javascript">
//定义"改变颜色"的函数
function changecolor(){
  document.getElementsByTagName("h2")[0].style.color="#f00";
}
//定义"改变宽高"的函数
function changewh(){
    document.getElementsByTagName("h5")[0].style.width="100px";
    document.getElementsByTagName("h5")[0].style.height="100px";
}

//定义"隐藏内容"的函数
function changecon(){
    document.getElementsByClassName("hid")[0].style.display="none";
   }
//定义"显示内容"的函数
function showcon(){
document.getElementsByTagName("p")[1].style.display="block";
}
//定义"取消设置"的函数
function cancel(){
    var mymessage=confirm("是否取消设置");
    if(mymessage){
        document.getElementsByClassName("cc")[0].removeAttribute("style");
    }
}

</script>
</body>
</html>

js中，object可以调用style对象，[]不可以调用style对象的更多相关文章

  1. js中Object.defineProperty()和defineProperties()

    在介绍js中Object.defineProperty()和defineProperties()之前,我们了解下js中对象两种属性的类型:数据属性和访问器属性. 数据属性 数据属性包含一个数据的位置, ...

  2. js中JSON的解析（将json字符串转化为对象）和序列化（将对象转化为json字符串）（函数的功能一般都挺全的，需要的时候去查看完整函数）

    js中JSON的解析(将json字符串转化为对象)和序列化(将对象转化为json字符串)(函数的功能一般都挺全的,需要的时候去查看完整函数) 一.总结 1.JSON解析:JSON.parse(myJS ...

  3. js 中object对象的操作

    n = object对象 for(var p in n){ console.log(p);// 取得是key值 console.log(n[p]);//取得是value值 } 继之前js中数组的常用方 ...

  4. JS中的常量（基本数据类型）和内置对象

    JS中的基本数据类型: String .number.null.boolean.undefined.object.symbol(ES6) 1.  利用typeof运算符时其中只有null是异常的,ty ...

  5. js中object的申明方法

    //js中的对象申明使用new Object(); //object类型的数据类似于数组通过下表来访问其中的值 //example1 var person=new Object(); person.n ...

  6. Js 中的false,零值,null,undefined和空字符串对象

    转自  http://www.imkevinyang.com/2009/07/javascript-中的false零值nullundefined和空字符串对象.html 在Javascript中,我们 ...

  7. js中[object Object]与object.prototype.toString.call()

    最近在用node读取文件中的json数据后,用JSON.parse()转成了json,然后响应数据传给前端,发现输出值object对象时显示[object object],在这里我们来看一下他的具体意 ...

  8. 5.1 JS中Object类型

    1.Object类型是引用类型中的一种. 2.创建Object实例(对象)的方式: 方式1:使用new操作符,后面跟上Object构造函数.如: var obj = new Object();//创建 ...

  9. js中Object.defineProperty()方法的解释

    菜菜: “老大,那个, Object.defineProperty 是什么鬼?” 假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做 1 2 3 var user = ...

  10. js中Object.defineProperties 定义一个在原对象可读可写的方法

    function A(){ this.name = 'hellow word'; } Object.defineProperties( A.prototype,{ doSomething2 : { v ...

随机推荐

  1. 用apscheduler处理调度任务，定时任务，重复任务

    from apscheduler.schedulers.blocking import BlockingScheduler from apscheduler.triggers.cron import ...

  2. Bypass WAF

    一.绕过命令执行: 很多WAF会限制参数字符不能为可以执行的命令,诸如ls.nc等,如果直接使用这些字符会直接被WAF拦截,但是可以通过这种的方式绕过这一限制 1.? 符号:这个符号表示条件测试,比如 ...

  3. srtvlet filter

    Filter,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时候,有时候发一些敏感的信息,发出后显示时 就会将敏感信息用*等字符替代,这就是用过滤器对信息进行 ...

  4. 给迷茫的你学习Node.js最好的方法

    这是真事儿,在3w咖啡整理书稿,然后小弟梁过来了,聊聊他的现状,一副很不好的样子,在天津我曾带过他大半年,总不能不管,我给他的建议是:“每天看10个npm模块” 对于学习Node.js迷茫的人来说,这 ...

  5. block ,GCD(转）

    原文:http://blog.sina.com.cn/s/blog_45e2b66c01010dhd.html 1.GCD之dispatch queue http://www.cnblogs.com/ ...

  6. UI基础:UIButton.UIimage 分类： iOS学习-UI 2015-07-01 21:39 85人阅读 评论(0) 收藏

    UIButton是ios中用来响应用户点击事件的控件.继承自UIControl 1.创建控件 UIButton *button=[UIButton buttonWithType:UIButtonTyp ...

  7. Vue CLI 3 配置兼容IE10

    最近做了一个基于Vue的项目,需要兼容IE浏览器,目前实现了打包后可以在IE10以上运行,但是还不支持在运行时兼容IE10及以上. 安装依赖 yarn add --dev @babel/polyfil ...

  8. TensorRT简介-转载

    前言 NVIDIA TensorRT是一种高性能神经网络推理(Inference)引擎,用于在生产环境中部署深度学习应用程序,应用有 图像分类.分割和目标检测等,可提供最大的推理吞吐量和效率.Tens ...

  9. linux搜索命令之find和grep

    在使用linux时,经常需要进行文件查找,其中查找的命令主要有find和grep.两个命令是有区的. 区别:(1)find命令是根据文件的属性进行查找,如文件名,文件大小,所有者,所属组,是否为空,访 ...

  10. VLOOKUP函数的使用方法

    VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) lookup_value:为在查找范围的第一列中要查找的值.比如下图的 C2 ...