DOM手术台
CSS分类
排队:
<div id="box" style="width:200px;border:1px solid red color:red;font-size:16px;"></div>
内联:在HTML的头部一般为例如以下格式
<styletype=”text/css”>
div.test{
background-color:red;
height:10px;
width:10px; margin:10px;
}
</style>
链接:在HTML中引入一个单独的CSS文件。格式例如以下
<linkrel="stylesheet" type="text/css"href="xx.css"/>
首先总体的看一下JS对CSS的操作
JS能够对行内样式进行获取和设置
在HTML中每一个元素都有一个属性对象style,该对象包括了该元素的全部的css样式。这样的CSS样式称为内嵌样式,例如以下
<div id="box" style="width:200px;border:1px solid red color:red;font-size:16px;"></div>
var box = document.getElementById('box');//获得id为box的元素节点
alert(box.style); //CSSStyleDeclaration对象
alert(box.style.color); //red
alert(box.style.width);
注意:在CSS中假设出现类型font-size的属性在JS中把-号去掉,后面的字符大写,写成alert(box.style.fontSize);
利用JS的style能够获得全部设置过的属性值。
也能够设置属性值。
box.style.color=green;//将颜色改为绿色
box.style.height=12px;//也能够设置没有的属性
DOM2级还为style定义了一些属性和方法
removeProperty(name)——移除指定的属性
setProperty(name,value,position)——给指定的属性设置值
可是通过style仅仅可以获得行内的css样式,假设使用内联或链接的则无法获得。在非IE中可以使用getComputedStyle()在IE中使用currentStyle()属性。这两个方法仅仅可以获得。
JS对内联及链接样式进行获取和设置
对这两种样式的操作时是通过CSSStyleSheet对象进行.对该对象的获取有两种方式
方法一:先获得元素,然后获得该对象
在IE中通过sheet属性获得。在非IE中通过styleSheet获得。
var link = document.getElementsByTagName('link')[0];//通过标签面获得全部的链接的css样式然后去第一个
var sheet = link.sheet || link.styleSheet;//通过sheet或styleSheet获CSSStyleSheet对象
方法二
通过doucument中的styleSheets直接获得。返回的是个数值,它兼容全部的浏览器。
var sheet=document.styleSheets[0];
CSSStyleSheet有一些属性和方法能够操作外联的样式,经常使用的“增”和“删”,可是IE和非IE是不兼容的,所以须要自己写函数进行兼容。假设要“改”CSS中的样式则能够使用CSSRules,对CSS文件里的某一条规则进行改动。
小结
CSS一共三种样式。DOM操作能够分为两个大类。行内的使用style可读可写,内联和链接的使用getComputedStyle或currentStyle仅仅能读。假设使用CSSStyleSheet对象下的CSSRules对象则能够对指定的CSS规则进行读和写。
版权声明:本文博主原创文章,博客,未经同意不得转载。
DOM手术台的更多相关文章
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- 通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
- HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
- HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
- 重撸js_2_基础dom操作
1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
随机推荐
- linux开机启动服务和chkconfig使用方法(转)
每个被chkconfig 管理的服务需要在对应的/etc/rc.d/init.d 下的脚本加上两行或者更多行的注释. 第一行告诉 chkconfig 缺省启动的运行级以及启动和停止的优先级.如果某服务 ...
- Storm-0.9.2-incubating源代码编译打包
近期遇到一些同学询问Storm-0.9.2-incubating源代码编译打包的问题,现将编译步骤说明例如以下: 1.凝视掉project各pom文件里关于maven插件(maven-gpg-plug ...
- SQLServer 复制和数据库镜像 具体配置部署
SQLserver 能够把镜像和复制同一时候部署,结合了两方的高可用性.能够使数据库得到更好的高可用性和容灾的保证. 关于镜像:f=255&MSPPError=-2147217396" ...
- C++ 在字符串中插入子串+推断字符串是否由空格组成
// Example3.cpp : 定义控制台应用程序的入口点. #include "StdAfx.h" #include <string> #include < ...
- Vs2012于Linux应用程序开发(4):公共财产的定义
在嵌入式开发流程.有些参数基本上不改变,比如编译主机IP,username,password等参数.我们用VS提供的属性管理器来保存这些參数. 打开属性管理器: watermark/2/text/aH ...
- NVL NVL2 NVLIF
========Oracle=======NVL (expr1, expr2)->expr1为NULL,返回expr2:不为NULL,返回expr1.注意两者的类型要一致
- [POJ 3150] Cellular Automaton (矩阵高速幂 + 矩阵乘法优化)
Cellular Automaton Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 3048 Accepted: 12 ...
- iOS很重要的 block回调
刚刚进入ios开发行业,发现开发中要用到大量的block回调,由此可见它的重要性.学习它之前我也是网上找的资料,推荐这篇文章http://blog.csdn.net/mobanchengshuang/ ...
- RPC模式的Hub操作
signalR 专题—— 第四篇 模拟RPC模式的Hub操作 在之前的文章中,我们使用的都是持久连接,但是使用持久连接的话,这种模拟socket的形式使用起来还是很不方便的,比如只有一个唯一的 O ...
- C#中使用gRPC
C#中使用gRPC 我的这几篇文章都是使用gRPC的example,不是直接编译example,而是新建一个项目,从添加依赖,编译example代码,执行example.这样做可以为我们创建自己的项目 ...