但我们经常会听到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/
一个基本的网站包含很多个网页,一个网页由html, css和javascript组成。html是主体,装载各种dom元素;css用来装饰dom元素;javascript控制dom元素。用一扇门比喻三者间的关系是:html是门的门板,css是门上的油漆或花纹,javascript是门的开关;
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
扩展资料
css优先权。
多个css样式可集中在单个html标签里,出现这种情况时,一般按优先权划分:
1、浏览器默认设置 (最低)
2、外部样式表
3、内部样式表(写在html的<head>标签内部)
4、内联样式(写在html的标签里,即style属性)(最高)
css的语法。
css由两个主要部分组成,选择器,一条或多条声明。
选择器是指css样式的名字“.seletor”,名字前面要带上一点“.”。声明是由属性和值组成,给个例子“margin: 0 auto”,冒号前面是属性,后面是值,该例子是定义元素居中显示。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)