<!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. (转载)Java 自动装箱与拆箱、equals和==的比较

    什么是自动装箱拆箱 基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象实例的时候,我们会这样: Class a = ...

  2. MySQL5.7 主从复制配置

    一.主从复制原理 MySQL 主从复制是一个异步的复制过程,主库发送更新事件到从库,从库读取更新记录,并执行更新记录,使得从库的内容与主库保持一致.每一个主从复制的连接,都有三个线程.拥有多个从库的主 ...

  3. 注解配置定时任务——@Scheduled

    Java中注解@Scheduled 的注解代码如下: @Target({ElementType.METHOD, ElementType.ANNOTATION_TYPE}) @Retention(Ret ...

  4. jenkins系列（11）-自动打tag升级篇

    很久以前,小怪分享过一篇jenkins自动打tag的文章(jenkins系列1--自动打tag),经过在项目实战和改进,我们升级了方案,现在和大家分享.,希望大家在工作中能够用起来. 使用步骤: 1. ...

  5. OC基础:block.字面量 分类： ios学习 OC 2015-06-22 19:08 155人阅读 评论(0) 收藏

    block 块语法,可以用block去保存一段代码,或者封装一段代码. block 实际是由c语言实现的,执行效率很高. block 实际借鉴了函数指针的语法. block,在多线程.异步任务,集合遍 ...

  6. 相邻行列相互影响的状态类问题（类似状压dp的搜索）（POJ3279）

    POJ3279http://poj.org/problem?id=3279 题意:黑白的板,每次选择一个十字形翻转(十字板内黑白互换,若是边界则不管),求最小将原图变为全白的策略. 这是一道对于每个格 ...

  7. hdu1166 敌兵布阵 树状数组/线段树

    数列的单点修改.区间求和 树状数组或线段树入门题 #include<stdio.h> #include<string.h> ],N; void add(int x,int a) ...

  8. Pma模块详解，对用户登录linux等进行限制，密码修改限制等

    PAM详细介绍 2014-04-02 09:26:41 标签:PAM 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://lidefu ...

  9. MySQL--REPLACE INTO更新自增列值引发的异常

    ##=====================================================================##测试环境:MySQL版本:MySQL 5.7.19复制 ...

  10. day29 python 套接字socket TCP udp 形式发送信息的区别

    我们经常把socket翻译为套接字,socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用已实现进程在网络中通信. socket起源于UNIX,在 ...