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 ...
随机推荐
- poj1185(状压dp)
题目连接:http://poj.org/problem?id=1185 题意:给出一张n*m的地图,'H'表示高地,不能部署炮兵,'P'表示平原,可以部署炮兵,炮兵之间必须保持横向.纵向至少2个格子的 ...
- hdu5119(dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5119 分析:dp[i][j]表示由前i个数组成异或和为j的方法数,则dp[i][j]=d[i-1][j ...
- SE 2014年5月23日
两站点 A 和 B,由于业务往来需要,所以工程师提出vpn技术,同时需要保证业务流在internet上的安全性,同时在这里站点均为固定ip地址. 通过分析以上信息,确定这里使用 IPSec VPN的主 ...
- 牛逼的验证码,printf返回值
牛逼的验证码,如下图, 结果是4321,为什么呢,主要是printf返回值问题?那么printf到底返回什么? 经查阅,printf的返回值是打印的字符个数,因此结果是4321就很明显了.
- 核心ASP.NET
1.用于Web应用程序的.NET Framework ASP.NET是.NET Framework的一部分,它可以在通过HTTP请求文档是在WEB服务器上动态创建它们,在.Net Framework中 ...
- Java命令学习系列(7):Javap(转)
原文出处: Hollis(@Hollis_Chuang) javap是jdk自带的一个工具,可以对代码反编译,也可以查看java编译器生成的字节码. 一般情况下,很少有人使用javap对class文件 ...
- PCB板蛇形走线有什么作用
PCB板蛇形走线有什么作用 PCB上的不论什么一条走线在通过高频信号的情况下都会对该信号造成时延时,蛇形走线的主要作用是补偿"同一组相关"信号线中延时较小的部分,这些部分一般是没 ...
- Android的目录结构说明
- Source not found for StandardEngine(ContainerBase).initInternal() line: 1078
总是这样 在复制完一个项目,并重新起了个名字后. 再打开网页就怎么也打开不了. 第一反应是tomcat出问题了. 于是有了这样的问题: Source not found for StandardE ...
- Xamarin C# Android for Visual Studio 平台安装
原文:Xamarin C# Android for Visual Studio 平台安装 Xamarin是基于Mono的平台,目前主要有以下产品(更具体请见:http://xamarin.com/pr ...