初探JavaScript魅力（二）
行为，样式，结构三者分离（javascript, css, html），不要在行间加行为，样式
样式优先级：*<标签<class<ID<行间
style与className，如果先给了style行间样式，再给className不会有效果
<title>无标题文档</title>
<style>
#div1{width:200px;height:200px;border:1px solid #000;}
.box{background:#F00;}
</style>
<script>
function toRed(){
var oDiv=document.getElementById('div1');
oDiv.className='box';
}
function toGreen(){
var oDiv=document.getElementById('div1');
oDiv.style.background='green';
}
</script>
</head> <body>
<input type="button" value="变红" onclick="toRed()"/>
<input type="button" value="变绿" onclick="toGreen()"/>
<div id="div1">
</div>
</body>
匿名函数 window.onload,在页面加载完成之后发生（执行） 这是btn1已经加载进来了
<title>无标题文档</title>
<script>
window.onload=function (){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('a');
};
};
</script>
</head> <body>
<input id="btn1" type="button" value="按钮"/>
</body>
对比代码如下：
<title>无标题文档</title>
</head> <body>
<input id="btn1" type="button" value="按钮"/>
<script>
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('a');
};
</script>
</body>
图片上的代码运行没有预期的效果
初探JavaScript魅力（二）的更多相关文章
- 初探JavaScript（二）——JS如何动态操控HTML
除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...
- 【JavaScript从入门到精通】第四课初探JavaScript魅力-04
第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...
- 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
- 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01
第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...
- 01 - 初探JavaScript魅力
网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠 ...
- 初探JavaScript魅力（五）
JS简易日历 innerHTML <title>无标题文档</title> <script> var neirong=['一','二','三','四','五' ...
- 初探Javascript魅力(1)
转自:CSDN--http://blog.csdn.net/cherry_vicent/article/details/42120149 1.javascript是什么 根据用户的一些操作,然后来 ...
- 初探JavaScript魅力（四）
选项卡 <title>无标题文档</title> <style> #div1 .active{background:#FF0;} #div1 div{width:2 ...
随机推荐
- ActiveMQ in Action(2) - Transport
关键字: activemq 2．2 Transport ActiveMQ目前支持的transport有:VM Transport.TCP Transport.SSL Transport.Peer ...
- Hihocoder 2月29日
时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个日期,计算这两个日期之间有多少个2月29日(包括起始日期). 只有闰年有2月29日,满足以下一个条件的年份为闰年 ...
- 阿里云 镜像 源 debian
/etc/apt/sources.list deb http://mirrors.aliyun.com/debian wheezy main contrib non-freedeb-src http: ...
- jqgird 实践
$.jgrid.defaults.styleUI="Bootstrap"; $("#table_list_2").jqGrid({ multiselect: t ...
- orderby与groupby区别
orderby与groupby区别 耆熏鼓挢 眼看食人魔首领的眩晕效果就要消 韵秦韵起床吃点东西吧我推了推秦 在店内专门负责接电话解答各种问题人们纷纷猜测很有可 锤﹂獾 惕阶你眉 汊哙累翅 遏呛 ...
- Python笔记1-20151021
一.字符串和字符编码 字符 ASCII Unicode UTF-8 A 01000001 00000000 01000001 01000001 中 x 01001110 00101101 111001 ...
- Oracle Day01 数据库基础
1.数据库 它是一种软件产品,是用于存放数据.管理数据的存储仓库,是有效组织在一起的数据集合. 2.数据库和数据库对象的概念 数据库:指的是物理磁盘上的文件 数据库对象:存在于内存中用于跟数据库文件进 ...
- 三层交换机配置说明（华为S5700设置三个网段互通）
1.配置Switch # 创建VLAN <HUAWEI> system-view[HUAWEI] sysname Switch[Switch] vlan batch 10 20 30# 配 ...
- ADT(abstract data types)抽象数据类型
1.What is it? An abstract data type is a set of objects together with a set of operations. 抽象数据类型是带有 ...
- openwrt uci
UCI: Unified Configuration Interface 通用配置接口,主要用于集中控制openwrt的配置文件. 1.uci使用的配置文件一般放置在设备上的/etc/config目录 ...