<style>

#div1{width:200px; height:200px; background:red;}

</style>

</head>

<script>

function setColor(color){

	var oDiv=document.getElementById("div1");

	oDiv.style.background=color;

	}

</script>

<body>

<input type="button" value="变绿" onclick="setColor('green')"/>

<input type="button" value="变黄" onclick="setColor('yellow')"/>

<input type="button" value="变黑" onclick="setColor('black')"/>

<div id="div1">

</div>

</body>

　　

<script>

function setStyle(name,value){

	var oDiv=document.getElementById("div1");

	oDiv.style[name]=value;

	}

</script>

<body>

<input type="button" value="变高" onclick="setStyle('height','400px')">

<input type="button" value="变宽" onclick="setStyle('width','400px')">

<input type="button" value="变绿" onclick="setStyle('background','green')">

<div id="div1">

</div>

　　

初探JavaScript魅力的更多相关文章

  1. 【JavaScript从入门到精通】第四课初探JavaScript魅力-04

    第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...

  2. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  3. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  4. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  5. 01 - 初探JavaScript魅力

    网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠 ...

  6. 初探JavaScript魅力（二）

    行为,样式,结构三者分离(javascript, css, html),不要在行间加行为,样式 样式优先级:*<标签<class<ID<行间 style与className,如 ...

  7. 初探Javascript魅力(1)

    转自:CSDN--http://blog.csdn.net/cherry_vicent/article/details/42120149 1.javascript是什么   根据用户的一些操作,然后来 ...

  8. 初探JavaScript魅力（五）

    JS简易日历    innerHTML <title>无标题文档</title> <script> var neirong=['一','二','三','四','五' ...

  9. 初探JavaScript魅力（四）

    选项卡 <title>无标题文档</title> <style> #div1 .active{background:#FF0;} #div1 div{width:2 ...

  10. 初探JavaScript魅力（三）

    复选框的全选.反选和不选 <title>无标题文档</title> <style> body{background:#666;} </style> &l ...

随机推荐

  1. MVC3+EF4.1学习系列(七)-----EF并发的处理

    看这篇文章之前 推荐园子里的 这个文章已经有介绍了 而且写的很好~~ 可以先看下他的 再看我的 并发 1.悲观并发 简单的说 就是一个用户访问一条数据时 则把这个数据变为只读属性  把该数据变为独占 ...

  2. Myeclipse 激活代码 8.6以前的版本

    public class Akey { private static final String LL = "Decompiling this copyrighted software is ...

  3. 解决MOSS列表匿名访问问题

    //匿名  http://blog.csdn.net/yang_5/article/details/5214293 这是发布以后MOSS网站,如果你一开始在内部都没有启用匿名访问,你设置这个是不启作用 ...

  4. linux下写脚本时-gt是什么意思

    -eq 等于-ne 不等于-gt 大于-ge 大于等于-lt 小于-le 小于等于

  5. [Mark] openvswitch megaflow

    Megaflow is an OpenVSwitch (OVS) feature than enables us to install flows for which some fields are ...

  6. laravel安装 笔记

    http://laod.cn/hosts/2015-google-hosts.html 谷歌FQIP laravel安装和设置流程 1安装composer , VirtualBox和Vagrant 下 ...

  7. php 提交表单

    滴答…滴答…的雨,欢迎大家光临我的博客. 学习是快乐的,教育是枯燥的. 博客园   首页   博问   闪存     联系   订阅  管理 随笔-58  评论-2017  文章-5  trackba ...

  8. Python Cookbook - 1 - 数据结构和算法

    1 序列解压:通过*来通配 *a, b = somelist,   first, *mid, last = somelist,  a, *b = somelist 2 使用双向队列: from col ...

  9. linux同步windows的时间

    找了很多的资料,都没有windows做时间服务,linux同步windows的时间的,最后自己找了一些软件,终于搞定了,写出来给大家共享,以免大家多走弯路 首先在http://www.meinberg ...

  10. linux手工笔记

    一.vi编辑器常用命令: -------------------------------- •插入文字:I键A键 •退回命令模式:ESC •存盘:w •不存盘退出:q •存盘退出:wq •强制退出:q ...