博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第九章 CSS-DOM
阅读量:5878 次
发布时间:2019-06-19

本文共 1317 字,大约阅读时间需要 4 分钟。

另一个网友整理了很多书中的代码:

1. 三位一体的网页

  浏览器看到的网页有三部分构成:结构层(HTML)、表示层(CSS)、行为层(javascript).

2. style属性

  每个元素有各种各样的属性,比如位置属性:parentNode,childNOdes, previousSibling;元素本身信息属性:nodeType, nodeName;所有元素都有style属性,包含元素的样式。

var obj = document.getElementById("obj");alert(obj.nodeName);//如果是p标签,则为palert(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

6. className属性

obj.classNme = "intro";elem.className += " intro";//追加

 

转载于:https://www.cnblogs.com/ustcyc/p/4200032.html

你可能感兴趣的文章
Python爬取豆瓣《复仇者联盟3》评论并生成乖萌的格鲁特
查看>>
关于跨DB增量(增、改)同步两张表的数据小技巧
查看>>
飞秋无法显示局域网好友
查看>>
学员会诊之03:你那惨不忍睹的三层架构
查看>>
vue-04-组件
查看>>
Golang协程与通道整理
查看>>
解决win7远程桌面连接时发生身份验证错误的方法
查看>>
C/C++ 多线程机制
查看>>
js - object.assign 以及浅、深拷贝
查看>>
python mysql Connect Pool mysql连接池 (201
查看>>
Boost在vs2010下的配置
查看>>
一起谈.NET技术,ASP.NET伪静态的实现及伪静态的意义
查看>>
20款绝佳的HTML5应用程序示例
查看>>
string::c_str()、string::c_data()及string与char *的正确转换
查看>>
11G数据的hive初测试
查看>>
如何使用Core Text计算一段文本绘制在屏幕上之后的高度
查看>>
==和equals区别
查看>>
2010技术应用计划
查看>>
XML 节点类型
查看>>
驯服 Tiger: 并发集合 超越 Map、Collection、List 和 Set
查看>>