JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

层叠样式 表和动态HTML

层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准。

使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DHTML)

CSS样式是一个名称/值的属性列表指定的,属性之间用分号隔开,名字属性和值属性之间用冒号隔开。

1、给文档元素应用样式规则(两种方法)

a、在HTML标记的style属性中使用它们。如:<p style=margin-left:Lin;margin-right:lin;"/>

b、使用样式表 stylesheet文件

css样式表由样式规则的集合构成。

每条规则以一个选择器开头,它指定文档元素,其后是用大括号括起来的样式属性和它们值的集合

2、关联样式表和文档

a、将样式表放置在文档<head>部分中的 <style></style>之间,使它们合并到HTML文档中

b、将样式表保存在一个样式表文件中,然后在<head></head>部分,使用link 导入CSS文件。

注:可通过 @import "文件名" 将样式导入到<style></style>或者另一个样式表文件当中。

3、层叠

CSS中的C代表cascading 。这个术语说明应用到文档中指定元素的样式规则来自不同的层叠。

优先规则

用户样式表覆盖默认的浏览器样式表(CSS文件当中定义的),作者样式表覆盖用户样式表(放在<head><style>标记中的样式),

内联样式覆盖所有样式表(放在HTML标记的style属性当中)。这条通用规则的一个特殊是,值包括!important

修饰符的用户样式属性覆盖作者样式,在一个样式表中,如果一个元素上应用了多条样式规则,最详细的规则定义

的样式将覆盖不太详细的规则定义的发冲突的样。

指定元素id的规则最详细,其次是指定class属性的规则,仅指定一个标记名的规则最不详细,指定多个嵌套标记

名的规则比指定一个标记名的规则详细。

4、DHTML的CSS

4.1 最关键的:定位 position

只有:absoulte fixed relative 才可以用top left等属性定位

static定位的元素不是DHTML元素,不可用top left 定位。这也是元素默认值。

4.2 z-index堆叠只适用于兄弟元素(同一个容器中的同级元素,如果两个不是兄弟的元素重叠,必须设置这两个元素的窗口

的z-index才有效,当然这两个窗口了得 是兄弟元素。)

4.3  JavaScript中的css属性

脚本化内联样式

element.Style.css属性名=值     (均为字符串)

一般css属性名 第一个单词小写,以后的每个单词首字母大写,余下小写。

e.Style.left="30px";

e.Style.fontFamily="sans-serif";

注:在JavaScript中设置新式属性时,单位是必需的

4.4  DHTML动画

本质和原理:周期性地改变元素的一个或多个样式属性,使用setInerval()和setTimeout()函数。

所有的DHTML动画都需要使用这两个函数。

5、脚本化CSS类

通过改变任意HTML元素的className属性来脚本化HTML class属性的值(动态设置一个样式类名)

className可能包含多个类的字符串,类名之间用空格隔开。设置时,可通过重新设置字符串来控制新的类

或者类列表。

6、脚本化样式表

HTML 2级DOM 标准为 <link> <script> 元素都定义了一个disabled属性。

可以在JavaScript设置元素的disabled的值,如果为true,和<link> 和script元素相关的样式就会被关闭,

且会被浏览器忽略。

样式表对象和样式表规则

2级DOM 定义了一个完整的API,用来查询,遍历和操作样式表本身。

应用于一个文档的样式表,存储在文档对象的styleSheets[]数组。 此数组中的每个

元素都是一个CSSStyleSheet对象。 一个CSSStyleSheet对象有一个包含了样式表规则

的cssRules[]数组。cssRules[]数组中的每一个对象为CSSRule对象, 代表一条CSS规则。

有两个属性可以可移植地的使用 selectorText   style

通过以上的style和selectorText可对样式表中的任意一个样式进行操作,也可添加新样式。

不两只的浏览器可能略有不同

W3C CSSStyleSheet接口定义了 insertRule()方法和deleteRule()方法用来添加和删除规则。

IE的为

addRule()和removeRule()函数。

时间: 2024-08-27 02:45:50

JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)的相关文章

JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)

具有交互性的JavaScript程序使用的是事件驱动的程序设计模型. 目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API的一部分内容,所有启用了JavaScript的浏览器都支持它,因此它具有可移植性. 2.标准事件模型 (一种强大的具有完整性的事件模型) 2级DOM标准对它进行了标准化,除IE以外的所有浏览器都支持它. 3.IE事件模型 想用高级事件处理特性的JavaScript程序设计者必须为IE浏览器编写特定的代码

JavaScript对css样式表操作

CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<head></head>之间的样式表 <head> <style> </style> </head> 外联:通过<head>标签中的<link >标签中链接的css样式表 js对内嵌操纵: <p style=&quo

JavaScript访问修改css样式表

1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" style="backgroundColor:blue;"></div> <script type="text/javascript"> var mydiv1=document.getElementById("myid"

JavaScript脚本化CSS样式表

在使用JavaScript脚本化操作CSS样式表的时候,必须要使用到两个对象: 1,元素对象:也就是<link>元素与<style>元素. 2,CSSStyleSheet对象:与当前文档关联的在一起的样式表,通过document.styleSheets获取,该对象是只读的类数组对象(由CSSStyleSheet对象组成的类数组). 注:可以通过在<link>与<style>元素中添加title属性,这样返回的CSSStyleSheet对象中的title属性可

JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)

XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应:但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话. 大多数浏览的客户端JavaScript都包含此功能. HTTP协议 规定了Web浏览器如何从Web服务请求文档,如何向Web服务器传送表单内容,以及如何响应 这些请求和传递. Web浏览器处理了很多HTTP(通常HTTP并不在脚本的控制之下) 1.用户点击一个链接 2.提交一个表单 3.输入一个URL 通常JavaScript代码可能脚

javascript点击按钮实现右移操作 DOM

<!doctype html>   <html lang="en">   <head>   <meta charset="UTF-8">   <meta name="Generator" content="EditPlus®">   <meta name="Author" content="">   <meta

JavaScript 客户端JavaScript之cookie和客户端持久性

Document对象都有一个cookie属性,它使得JavaScript代码能够在用户的硬盘上持久地存储数据, 并且能够获取以这种方式存储的数据.客户端持久性是赋予WEB应用程序记忆力的一种简单方法. cookie还可以用于客户端脚本化,并且是HTTP协议的一个标准扩展. cookie的字符串由  名字/值 组成 (=区分),不同的属性之间用分号隔开. cookie有4个可选属性 1.expires(已被max-age取代)  生存期 expires是未来的一个过期日期,max-age用秒来设置

追加样式表操作

//addcss             Base.prototype.addcss=function(num,selectortxt,csses,ind){                 var sheet=document.styleSheets[num];                 if(typeof sheet.insertRule!=undefined)                 {                     sheet.insertRule(selecto

注册表操作常用API 详解

API说明:RegCreateKey创建一个KEY,并返回相应的HKEYRegOpenKey打开注册表,得到一个HKEY,用来作为下面这些函数的第一个参数.RegOpenKeyEx同RegOpenKey类似,一般很少用,增加了一个访问控制类型参数.RegSetValue设置一个HKEY的默认值RegSetValueEx设置一个HKEY除默认值以外其它的值RegQueryValue获取一个HKEY的默认值RegQueryValueEx获取一个HKEY除默认值以外其它的值RegDeleteKey删除