层叠样式 表和动态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()函数。
 

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

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

    具有交互性的JavaScript程序使用的是事件驱动的程序设计模型.   目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...

  2. JavaScript对css样式表操作

    CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...

  3. JavaScript访问修改css样式表

    1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...

  4. JavaScript 客户端JavaScript之 脚本化文档

    客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由.   一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...

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

    XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应:但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话.   大多数浏览的客户端JavaScri ...

  6. JavaScript 客户端JavaScript之 Web浏览器的环境

    Web浏览器实现的Javascript,通过Web浏览器实现的JavaScript引入了大量可脚本化的对象(1.Web浏览器 2.HTML 3.HTML中的内容)  Web浏览器中的Javascrip ...

  7. JavaScript 客户端JavaScript之 脚本化浏览器窗口

    1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能.   前者是从运行的那一 ...

  8. javascript基础（三）： 操作DOM对象（重点）

    DOM:文档对象模型 核心 浏览器网页就是一个Dom树形结构! 更新:更新Dom节点 遍历Dom节点:得到Dom节点 删除:删除一个Dom节点 添加:添加一个新的节点 要操作一个Dom节点,就必须要先 ...

  9. JavaScript 客户端JavaScript之Document对象中的表单和表单元素

    Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...

随机推荐

  1. java面试（毕业一年后准备换工作）

    还记得一年前的今天,在网上投简历,找工作,当时找的工作的工作地点都在成都,其实自己挺想去外面工作几年的,如果毕业后就在成都工作,今后基本不可能去外省了, 所以刚好上海的一家外包公司来成都理工校招,导员 ...

  2. Java基础学习第一天

    ================每日必读==================== 写代码: 1.明确需求.我需要实现什么需求? 2.分析思路.我需要怎么实现需求? 3.确定步骤.我的每一部分思路需要使 ...

  3. 如何使用Instruments诊断App（Swift版）：起步-b

    无论你写过许多iOS应用,还是刚刚开始你的第一个应用,毫无疑问,你都会想出一些新点子,或者想去弄明白你该怎么做,来让你的app变得更好. 除去添加新特性来优化你的应用,有一件事是所有好的开发者都回去做 ...

  4. c语言实现一个链表

    一.基础研究 我们在这里要理解和实现一种最基本的数据结构:链表.首先看看实现的程序代码: List .h: 事实上我们观察list.h发现前面一部分是数据结构的定义和函数的声明,后面一部分是函数的实现 ...

  5. hadoop安装问题记录

    start-yarn.sh 启动正常,但是无法访问网页http://localhost:8088/cluster 原因: 可能是ipv6 的问题 解决方法: http://stackoverflow. ...

  6. Ftp的断点下载实现

    思路:首先获取本地临时文件的大小,在通过FTp的REST命令获取远程文件的偏移,然后再RETR命令在偏移处下载.while循环对比本地文件和远程文件的字节大小,如此 不断的反复以上过程,直到远程文件字 ...

  7. BZOJ2276: [Poi2011]Temperature

    2276: [Poi2011]Temperature Time Limit: 20 Sec  Memory Limit: 32 MBSubmit: 293  Solved: 117[Submit][S ...

  8. Delphi TcxtreeList控件说明 转

    Delphi TcxtreeList控件说明   树.cxTreeList 属性: Align:布局,靠左,靠右,居中等 AlignWithMargins:带边框的布局 Anchors:停靠 (akT ...

  9. Spark Streaming 入门指南

    这篇博客帮你开始使用Apache Spark Streaming和HBase.Spark Streaming是核心Spark API的一个扩展,它能够处理连续数据流. Spark Streaming是 ...

  10. linux下ssh使用和配置

    常用格式:ssh [-l login_name] [-p port] [user@]hostname 更详细的可以用ssh -h查看. 举例 不指定用户: ssh 192.168.0.11 指定用户: ...