理解DOM如何操作CSS样式

html-css017

理解DOM如何操作CSS样式,第1张

我们知道DOM部分其实就是浏览器各大厂商提供的一些列方法和属性的集合,这一系列的属性和方法也被称为接口,这些接口可以让我们更加方便的操作HTML和XML,注意我没有说CSS哦

但我们经常会听到js操作css或者脚本化css的说法,那是怎么回事呢?

其实,DOM中提供的方法能操作HTML的所有内容,其中包括能操作元素的属性,而元素的属性中又恰好包含style属性,style属性表示的是该元素行间样式,而且行间样式的权重是1000。所以一般我们通过DOM操作元素的属性style就间接的改变了该元素的CSS样式。

DOM操作CSS样式其实质是通过DOM控制行间样式,从而达到改变样式的效果。这只能说间接的操作CSS,并非真实的直接操作CSS文件

通过DOM元素的style读写CSS行间样式

格式:ele.style.prop

注:

1. 可读可写行间样式,没有兼容性问题

2. 碰到保留字属性,前面应添加css;例如:float-->cssFloat

3. 复合属性必须拆解

4. 组合单词变成小驼峰式

5. 写入的值必须是字符串格式

用法比较简单,我们深入看看style吧

先随便来两个元素,并选中

我们发现,dom元素的原型的原型都是HTMLElement。于是猜测,style就是定义在HTMLElement的原型链上,所以凡是DOM元素都有style属性。

通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上

明白style定义在哪里之后,再来看style里面是什么?

目前也只有这种方式能修改CSS样式。

下面再来了解查询样式的方式:

window.getComputedStyle(ele,null)

IE使用另外一直方式代替

ele.currentStyle

最后我们封装一个所有浏览器都能用的方法:

什么是 HTML 文件?

HTML 指超文本标签语言。

HTML 文件是包含一些标签的文本文件。

这些标签告诉 WEB 浏览器如何显示页面。

HTML 文件必须使用 htm 或者 html 作为文件扩展名。

HTML 文件可以通过简单的文本编辑器来创建。

什么是 DOM?

通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西,JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。

在 1998 年,W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

http://www.w3school.com.cn/