第九章 CSS-DOM
另一个网友整理了很多书中的代码:http://www.cnblogs.com/jingangel/archive/2013/01/03/2843505.html
1. 三位一体的网页
浏览器看到的网页有三部分构成:结构层(HTML)、表示层(CSS)、行为层(javascript).
2. style属性
每个元素有各种各样的属性,比如位置属性:parentNode,childNOdes, previousSibling;元素本身信息属性:nodeType, nodeName;所有元素都有style属性,包含元素的样式。
var obj = document.getElementById("obj");
alert(obj.nodeName);//如果是p标签,则为p
alert(typeof obj.type);//object,是一个对象
alert(typeof obj.nodeName);//string
举例:
//局限style只能获取内部样式,不能获取样式文件中的样式
element.style.color;//颜色
element.style.fontFamily;//返回字体,中间爱你没有下划线
element.style.fontSize;//字体大小
3. 获取样式
#第一种,根据标签名称
p{
font-size: 1em;
}
#第二种,根据样式名称
.findprint{
font-size: 1em;
}
#第三种,根据元素的id
#intro{
font-size: 1em;
}
4. 奇偶选择
tr:nth-child(odd){background-color:#ffc;}
tr:nth-child(even){background-color:#fff;}
5. 响应事件,CSS可以实现,dom可以利用onmouseover事件来实现
#鼠标移过
a:hover{
color:#c60;
}
tr:hover{
color:#c60;
font-weight: bold;
}
function highlightPage(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
var headers = document.getElementsByTagName('header');
if(headers.length == 0) return false;
var navs = headers[0].getElementsByTagName('nav');
if(navs.length == 0) return false;
var links = navs[0].getElementsByTagName('a');
for(var i=0; i<links.length; i++){
linkurl = links[i].getAttribute('href');
if(window.location.href.indexOf(linkurl)!=-1){
links[i].className = "now";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
addLoadEvent(highlightPage);
6. className属性
obj.classNme = "intro";
elem.className += " intro";//追加
第九章 CSS-DOM的更多相关文章
- 第九章 利用DOM脚本检索,替换,设置,追加样式信息
我们浏览器里看到的网页是由以下三层信息构成的一个共同体: -结构层,由HTML或XHTML之类的标记语言负责去搭建文档的结构. -表示层,由CSS负责设置文档的呈现效果. -行为层,由JavaScri ...
- JavaScript DOM编程艺术-学习笔记(第八章、第九章)
第八章 1.小知识点: ①某些浏览器要根据DOCTYPE 来决定页面的呈现模式(标准模式 / 怪异模式--也称兼容模式): 兼容模式意味着浏览器要模仿老一辈的浏览器的怪异行为,来让老站点得到运行,并让 ...
- Knockout应用开发指南 第九章:高级应用举例
原文:Knockout应用开发指南 第九章:高级应用举例 1 Contacts editor 这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的 ...
- CSS3秘笈复习:第九章&第十章
第九章 1.和链接有关的伪类: (1):link,未访问过的链接 (2):visited,已访问过的链接 (3):hover,鼠标悬停链接 (4):active,单击链接时 这四种方式一定要严格按上面 ...
- jQuery第九章
第九章 jQuery Mobile 一.HTML5.0简介 谈到Web设计,我们经常把Web分为三个层: (1)结构层:(2)表现层:(3)行为层. 对应的技术分别是: (1)HTML:(2)CSS: ...
- 《Django By Example》第九章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag 注:哈哈哈,第九章终于来啦 ...
- o'Reill的SVG精髓(第二版)学习笔记——第九章
第九章:文本 9.1 字符:在XML文档中,字符是指带有一个数字值的一个或多个字节,数字只与Unicode标准对应. 符号:符号(glyph)是指字符的视觉呈现.每个字符都可以用很多不同的符号来呈现. ...
- SEO 第九章
SEO第九章 本次课目标: 1. 外部优化之平台优化 2. 如何撰写SEO诊断方案 一.外部平台优化——百度系列平台 百度系列的平台都是属于百度自己的产品,排名都是比较高的,所以我们在做外部推广的 ...
- 第九章 基于HTTP的功能追加协议
第九章 基于HTTP的功能追加协议 通过在HTTP的基础上添加新的功能来提高性能和功能. 一.消除HTTP瓶颈的SPDY SPDY(SPeeDY)目的是提高HTTP性能,缩短Web页面的加载时间(50 ...
- 鸟哥的linux私房菜——第九章学习(vim编辑器)
第九章vim编辑器 1.0).vi与vim Linux下文本界面的文书编辑器通常会有常常听到的就有: emacs, pico, nano, joe, 与 vim 等等. vi的优势: 所有的 Unix ...
随机推荐
- C puzzles详解【38-45题】
第三十八题 What is the bug in the following program? #include <stdlib.h> #include <stdio.h> # ...
- JSP ajax跨域问题 怎么处理 原因:CORS 头缺少 'Access-Control-Allow-Origin')。 ajax http 415
/** * Project Name:cm2mManage * File Name:CrossSiteFilter.java * Package Name:com.yoxnet.serverframe ...
- ARC————自动引用计数
一.内存管理/引用计数 1.引用计数式内存管理的方式(下面四种) 对象操作 OC方法 生成并持有对象 alloc/new/copy/mutableCopyd等方法 持有对象 retain方法 释放对象 ...
- 代码快捷键的设置读取App.config方法
附件下载:http://files.cnblogs.com/files/qtiger/ShortcutAchieve.zip 代码实现最重要(增加引用using System.Configuratio ...
- asp.net过滤HTML标签的几个函数
以下是引用片段: ----- /**/ /// <summary> /// 去除HTML标记 /// </summary> /// <param name="N ...
- CentOS配置FTP(VSFTPD)
一.vsftp安装篇 # 安装vsftpd yum -y install vsftpd # 启动 service vsftpd start # 开启启动 chkconfig vsftpd on 二.v ...
- 在Nginx 下运行 Laravel5.1 的配置
一.nginx 的 vhost.conf 配置: server { listen ; server_name sub.domain.com; set $root_path '/srv/www/defa ...
- ASCII码详解
ASCII码详解 ASCII码表 ASCII码大致可以分作三部分組成.第一部分是:ASCII非打印控制字符: 第二部分是:ASCII打印字符: 第三部分是:扩展ASCII打印字符. 第一部分:ASCI ...
- MarkDown写作技巧
前言 年轻的我们往往苦恼于没有充实的社会经历.社会阅历,很难有较强的个人能力.个人魅力!就个人能力而言,本 人主要把它分为两种:“吸收能力”和“输出能力”.吸收能力主要体现了个人对外界知识的摄入能力, ...
- 对"使用Mono Runtime Bundle制作安装包让C#桌面应用程序脱离net framework"增加说明
http://www.cnblogs.com/basilwang/archive/2011/11/29/2267809.html 想做独立引用的估计都看过这一篇文章,但是因为软件更新,很多地方已经不适 ...