<!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. Beta阶段第1周/共2周 Scrum立会报告+燃尽图 05

    作业要求与 [https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284] 相同 版本控制:https://git.coding.net/li ...

  2. 深入理解Linux网络技术内幕——PCI层和网络接口卡

    概述     内核的PCI子系统(即PCI层)提供了不同设备一些通用的功能,以便简化各种设备驱动程序.     PCI层重要结构体如下: pci_device_id     设备标识,根据PCI标志定 ...

  3. MySQL添加字段和修改字段

    MySQL添加字段的方法并不复杂,下面将为您详细介绍MYSQL添加字段和修改字段等操作的实现方法,希望对您学习MySQL添加字段方面会有所帮助. 1添加表字段 alter table table1 a ...

  4. html5、canval 对 图片的压缩

    let src = this.cropper.getCroppedCanvas().toDataURL('image/jpeg');let can = document.createElement(' ...

  5. 如何在magento添加推荐分类

    Magento Featured Category推荐分类模块安装 1.下载Magento Featured Categories Extension,下载地址:http://www.storefro ...

  6. Avito Cool Challenge 2018(div1+2)

    A. Definite Game: 题意:输入N,输出最小的结果N-x,其中x不少N的因子. 思路:N=2时,输出2:其他情况输出1:因为N>2时,N-1不会是N的因子. #include< ...

  7. java面试题12

    1.  jsp与servlet的区分? 答:Servlet和JSP都是基于java语言上的动态网页技术,Servlet程序其实就是java程序,只不过它所使用的类库为JAVA Servlet API, ...

  8. 和为 s 的两个数字（和为 s 的连续正数序列）

    题目 输入一个递增排序的数组和一个数字 s,在数组中查找两个数,得它们的和正好是 s.如果有多对数字的和等于 s,输出任意一对即可 思路 我们先在数组中选择两个数字,如果它们的和等于输入的 s,我们就 ...

  9. 完成分析 FastAdmin 用户余额功能（后台篇）

    分析 FastAdmin 用户余额功能(后台篇) 分析 FastAdmin 用户余额功能(后台篇) 虽然 FastAdmin 主要针对后台的框架,但也在不断完善前台的功能,有一天小伙伴在社区里提了一个 ...

  10. hadoop之 exceeds the limit of concurrent xcievers处理

    dfs.datanode.max.transfer.threads: 默认 4096 < 2.0之前该参数为dfs.datanode.max.xcievers >解释:Specifies ...