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手术台的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

随机推荐

  1. linux开机启动服务和chkconfig使用方法(转)

    每个被chkconfig 管理的服务需要在对应的/etc/rc.d/init.d 下的脚本加上两行或者更多行的注释. 第一行告诉 chkconfig 缺省启动的运行级以及启动和停止的优先级.如果某服务 ...

  2. Storm-0.9.2-incubating源代码编译打包

    近期遇到一些同学询问Storm-0.9.2-incubating源代码编译打包的问题,现将编译步骤说明例如以下: 1.凝视掉project各pom文件里关于maven插件(maven-gpg-plug ...

  3. SQLServer 复制和数据库镜像 具体配置部署

    SQLserver 能够把镜像和复制同一时候部署,结合了两方的高可用性.能够使数据库得到更好的高可用性和容灾的保证. 关于镜像:f=255&MSPPError=-2147217396" ...

  4. C++ 在字符串中插入子串+推断字符串是否由空格组成

    // Example3.cpp : 定义控制台应用程序的入口点. #include "StdAfx.h" #include <string> #include < ...

  5. Vs2012于Linux应用程序开发(4):公共财产的定义

    在嵌入式开发流程.有些参数基本上不改变,比如编译主机IP,username,password等参数.我们用VS提供的属性管理器来保存这些參数. 打开属性管理器: watermark/2/text/aH ...

  6. NVL NVL2 NVLIF

    ========Oracle=======NVL (expr1, expr2)->expr1为NULL,返回expr2:不为NULL,返回expr1.注意两者的类型要一致

  7. [POJ 3150] Cellular Automaton (矩阵高速幂 + 矩阵乘法优化)

    Cellular Automaton Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 3048   Accepted: 12 ...

  8. iOS很重要的 block回调

    刚刚进入ios开发行业,发现开发中要用到大量的block回调,由此可见它的重要性.学习它之前我也是网上找的资料,推荐这篇文章http://blog.csdn.net/mobanchengshuang/ ...

  9. RPC模式的Hub操作

    signalR 专题—— 第四篇 模拟RPC模式的Hub操作   在之前的文章中,我们使用的都是持久连接,但是使用持久连接的话,这种模拟socket的形式使用起来还是很不方便的,比如只有一个唯一的 O ...

  10. C#中使用gRPC

    C#中使用gRPC 我的这几篇文章都是使用gRPC的example,不是直接编译example,而是新建一个项目,从添加依赖,编译example代码,执行example.这样做可以为我们创建自己的项目 ...