<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. 深入理解Java内存模型 - volatile

    volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会很特别.理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个监视器锁对这 ...

  2. java 类型转换（摘自网络）

    java基本类型转换规则   1.基本数据类型的转换是指由系统根据转换规则自动完成,不需要程序员明确地声明不同数据类型之间的转换.     转换在编译器执行,而不是等到运行期再执行. 2.基本数据类型 ...

  3. 简单的javasrcipt选项卡

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta char ...

  4. Saltstack 操作目标，正则匹配，及组管理

    如果我们要维护好一个庞大的配置管理系统那么首选得维护好我们的管理对象,在saltstack系统中我们的管理对象叫做Target, 在master上我们可以采用不同Target去管理不同的Minion. ...

  5. Java语言国际化

    事实上,Java语言不可能支持所有国家和语言,如需要获取Java语言所支持的语言和国家,可调用Locale类的getAvailableLocale方法获取,该方法返回一个Locale数组,该数组里包含 ...

  6. NDK常见问题

    1. 忽略编译警告为错误 APP_CPPFLAGS += -Wno-error=format-security 2. android studio 手动编译 __android_log_print 错 ...

  7. was性能调优

    数据库设置 使用此页面来指定数据库会话支持的设置. 要查看此管理控制台页面,请单击服务器 > 服务器类型 > WebSphere 应用程序服务器 > server_name > ...

  8. mipi 调试经验（转）

    以下是最近几个月在调试 MIPI DSI / CSI 的一些经验总结,因为协议有专门的文档,所以这里就记录一些常用知识点: 一.D-PHY 1.传输模式 LP(Low-Power) 模式:用于传输控制 ...

  9. eclipse代码提示优化

    用Eclipse编写Android程序的代码提示功能主要是在java和xml文件中,有时候会失效,默认的提示功能有限. 1)java文件自动提示      Window->Preferences ...

  10. 《Windows驱动开发技术详解》之Windows内核函数

    内核模式下字符串操作 ANSI_STRING和UNICODE_STRING分别定义如下: