在所有的产品设计中,选择最适用的工具去解决问题是最基本的原则。

①使用(X)HTML去搭建文档的结构。

②使用CSS 去设置文档的呈现效果。

③使用DOM脚本去实现文档的行为。

文档中的每个元素都是一个对象,每个元素都有一个style属性,它们是一个对象。

样式都存放在style对象的属性里:element.style.property;

使用style对象的color属性:element.style.color;

减号和加号之类的操作符是保留支付,不允许用在函数或者变量的名字里。这同时意味着它们也不能用在方法或属性的名字里。当你需要引用一个中间带减号的CSS属性的时候,DOM要求你用驼峰命名法。CSS属性font-family变为DOM属性fontFamily:element.style.fontFamily;

内嵌样式:通过style属性获取样式有很大的局限性。style属性只能返回内嵌样式。只有把CSS style属性插入到标记里,才可以用DOM style属性去查询那些信息。

在外部样式表里声明的样式不会进入style对象,style对象只包含在HTML代码里用style属性声明的样式。

style对象可以用来更新样式:

element.style.property=value;

style对象的属性值永远是一个字符串。

style对象的属性的值必须放在引号里,单引号或双引号均可。

只要有可能,最好选用CSS为文档设置样式。

如果想要改变某个元素的呈现效果,使用CSS;如果想要改变某个元素的行为,使用DOM;

className属性:className属性是一个可读/可写的属性,凡是元素节点都有这个属性。

可以用className属性得到一个元素的class属性:element.className;

用className属性和赋值操作符设置一个元素的class属性:element.className=value;

把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象。

CSS-DOM的更多相关文章

  1. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  2. [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

    DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hi ...

  3. Html,Css,Dom,javascript细节总结

    最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...

  4. html+css+dom补充

    补充1:页面布局 一般像京东主页左侧右侧都留有空白,用margin:0 auto居中,一般.w. <!DOCTYPE html> <html lang="en"& ...

  5. CSS - DOM 经常使用方法

    offset() 方法返回或设置匹配元素相对于文档的偏移(位置). 包括两个属性值:top,left. position() 方法返回匹配元素相对于父元素的位置(偏移). 包括两个属性值:top,le ...

  6. jQuery基础DOM和CSS操作

    $('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...

  7. 基础DOM和CSS操作(一)

    DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...

  8. Jquery5 基础 DOM 和 CSS 操作

    学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 DOM 是一种文档对象模型.方便开发者对HTML 结构元素内容进行展示和修改.在 JavaScr ...

  9. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  10. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

随机推荐

  1. AndroidStudio打包jar

    1.像平常一个样新建一个项目 2.(在步骤1的基础上)点击File-->New-->New Module—>选择Android Library-->点击Next(如下图:) 定 ...

  2. OpenStack Weekly Rank 2015.08.17

    Module Reviews Drafted Blueprints Completed Blueprints Filed Bugs Resolved Bugs Cinder 5 1 1 6 13 Sw ...

  3. (转)awk数组详解及企业实战案例

    awk数组详解及企业实战案例 原文:http://www.cnblogs.com/hackerer/p/5365967.html#_label03.打印数组:1. [root@nfs-server t ...

  4. jenkins自动打IOS包(转发)

    投稿文章,作者:一缕殇流化隐半边冰霜(@halfrost) 前言 众所周知,现在App的竞争已经到了用户体验为王,质量为上的白热化阶段.用户们都是很挑剔的.如果一个公司的推广团队好不容易砸了重金推广了 ...

  5. ThreadLocal 开启事务

    1.ThreadLocal该类提供了线程局部变量 2.分析原理: ThreadLocal内部有一个Map.Map的key是当前线程对象,value是一个Object对象. 模拟该类: public c ...

  6. 工作空间造成的javaweb项目无法新建

    出现问题: 当我打开myeclipse开发工具将原有的已经存在的一个名为jeecms的项目删除的时候,出现了删除不了,因此我采取了强制的删除的方法,最终项目删除了.接下来新建同名的javaweb就出现 ...

  7. linux 编译安装php7

    1.下载php7安装包: php7 2.解压 .tar.gzcd php-7.1.5 3.可能需要的扩展 yum install libmcrypt libmcrypt-devel mcrypt mh ...

  8. Aspose.Cells导入导出execl

    插件:Aspose.Cells 没有安装office插件也能使用: 导出:不能使用ajax异步· /// <summary> /// 导出试题 /// </summary> / ...

  9. 创建Brush对象

    在GDI+中,可使用笔刷,以各种个颜色和图像填充图形,GDI+的Brush类本身是一个抽象的类,所以是不能实例化Brush的 但是GDI+的API提供五个类,就扩展了Brush类并提供了具体的实现方式 ...

  10. mysql-sql命令

    ##本单元目标 一.为什么要学习数据库 二.数据库的相关概念 DBMS.DB.SQL 三.数据库存储数据的特点 四.初始MySQL MySQL产品的介绍 MySQL产品的安装 ★ MySQL服务的启动 ...