使用DOM操纵样式表

✍ 操纵元素的Style样式属性(所有的均对于CSS的内联式)

对于每个CSS样式,Style对象都包含了一个相对应的属性,只需要用到style属性即可;

Div.style.color= "red"; //给div元素设置字体颜色为红色

对于两个词的样式,在JavaScript样式属性的格式去驼峰命名法;

 Div.style.backgroundColor= "#000"; //给div元素设置背景色为黑色

DOM为style对象提供了方法用来与CSS样式定义的单个部分交互

➣ getPropertyValue(propertyName)——返回CSS属性的属性值的字符串。这个propertyName必须是CSS样式中指定的格式;

➣ getPropertyPriority()——如果再CSS属性规则中指定了"!important",则返回字符串"!important",否则返回一个空的字符串;

➣ item(index)——返回指定索引的CSS属性名称;

➣ removeProperty(propertyName)——从CSS定义中删除propertyName。

➣ setProperty(propertyName,value,prioriry)——设置CSS属性propertyName为value以及给定的优先级("important"或者一根空字符串);

✍ 操纵外部样式表以及style元素中的样式

使用document.styleSheets集合,该集合包含了在一个网页所有样式表的应用,也包括所有的style属性。

➣ disabled——表示样式表是否被禁用的布尔值。这个属性是可读/写的,将这个值设置为true可以禁用样式表;

➣ href——如果样式表是通过<link>包含的,则是样式表的URL;否则,是null;

➣ media——当前样式表支持的所有媒体类型的集合。与所有DOM集合一样,这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得结合中 特定的项。如果集合是空列表项,表示样式表适用于所有媒体。在IE中,media是一个反映<link>和<style>元素 media特性的字符串;

➣ ownerNode——指定样式表的DOM节点(<link/>或者<style/>元素)。如果当前样式表是其它样式表通过@import导入的,则这个属性值为null。IE不支持这个属性;

➣ parentStyleSheet——如果样式表被包含在CSS@import语句中,本属性指向语句发现的样式;

➣ title——ownerNode中的title属性的值;

➣ type——样式表的mine类型。对CSS样式表而言,通常是“type/css”;

(PS:一条规则上的style对象不是只读的,我们可以更改它。但是更改一条CSS规则会影响页面上所有使用规则的元素)

✍ 操纵最终样式

一个元素可能有多个样式作用于其上,最终在屏幕上显示的样式,我们称为最终样式。最终样式由所有的样式信息(包含内联样式和CSS规则)组成,用来真实指示元素在屏幕是如何显示的(存在兼容性问题,IE和DOM有不同的实现方式);

➣ IE中的最终样式

IE在每个元素上提供了一个currentStyle对象,该对象包含了从元素背景色到任何相关CSS规则的style对象的所有属性。currentStyle对象与style工作方式相同,有同样的属性和方法。

➣ DOM中的最终样式

DOM对于给定的元素提供了一个方法getComputedStyle()来创建一个类似style的对象,例如:hover或者:first-letter(如果不需要,第二个参数可为空)。该方法接收两个参数,一个是要获取样式的元素,一个是伪元素,我们可以从document.defaultView对象访问该方法(IE和Safari浏览器不支持document.defaultView)。

➣ 获取IE和DOM的最终样式(已解决兼容性问题)

var obj = document.getElementById("test");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, null); // DOM
} else {
style = obj.currentStyle; // IE
}

JavaScript总结(六)的更多相关文章

  1. JavaScript(六)——实现图片上下或者左右无缝滚动

    /*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...

  2. javascript继承(六)—实现多继承

    在上一篇javascript继承—prototype最优两种继承(空函数和循环拷贝)(3) ,介绍了js较完美继承的两种实现方案,那么下面来探讨一下js里是否有多继承,如何实现多继承.在这里可以看看j ...

  3. JavaScript案例六:简单省市联动(NBA版)

    JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单 ...

  4. 2014年辛星完全解读Javascript第六节 对象

    随着面向对象的普及,现在很多语言都在支持面向对象,Javascript也不例外,所谓对象,就是拥有属性和方法的数据.这里的属性其实就是变量,这里的方法,其实就是函数.但是Javascript的面向对象 ...

  5. javascript (六) 引用外部js文件

    外部的 JavaScript 也可以把脚本保存到外部文件中.外部文件通常包含被多个网页使用的代码. 外部 JavaScript 文件的文件扩展名是 .js. 如需使用外部文件,请在 <scrip ...

  6. javascript基础(六)对象

    原文http://pij.robinqu.me/ JavaScript Objects 创建对象 对象直接量 var o = { foo : "bar" } 构造函数 var o ...

  7. JavaScript进阶(六)用JavaScript读取和保存文件

    用JavaScript读取和保存文件 因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来, ...

  8. 学习 JavaScript (六)核心概念:函数

    基本知识 函数对于我们来说,不算陌生的东西.中学就已经有了函数的概念,比如: y = f(x) 输入一个数 x,能够得到与之对应的一个数 y.也就是说,f(x) 的有一个返回值,这是函数在数学上的定义 ...

  9. 前端笔记之JavaScript(六)让人头疼的正则表达式

    一.正则表达式 1.1正则概述和体验 正则表达式是被用来匹配字符串中的字符组合的模式,常用来做表单验证.在JavaScript中,正则表达式也是对象,是一种引用类型. 案例:正确输入一个电话号码,01 ...

  10. JavaScript(六)

    定时器 定时器在javascript中的作用1.制作动画2.异步操作3.函数缓冲与节流 定时器类型及语法 /* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行 ...

随机推荐

  1. SQL Server 索引知识-应用,维护

    创建聚集索引 a索引键最好唯一(如果不唯一会隐形建立uniquier列(4字节)确保唯一,也就是这列都会复制到所有非聚集索引中) b聚集索引列所占空间应尽量小(否则也会使非聚集索引的空间变大) c聚集 ...

  2. geogebra几何画图工具用法

    1. intersectPath :该命令可以自动“算出”对应多边形的交汇区域 2. 静态文本可以指定到一个对象的中间这样将来动态变化对象大小时也不出现问题 3.export worksheet 4. ...

  3. leveldb开篇

    因为工作的需求,最近看了一些项目的源码,包括nginx.tair.leveldb,一直看了下来都没有写东西的习惯,虽然作了不少记录,但都是只有自己才能看懂的笔记. 好多次都说开始写blog,锻炼一下自 ...

  4. MVC 实现自定义404错误页

    直接进入正题. 在HomeController中有一个NotFound的Action方法. public ActionResult NotFound() { return View(); } 对应的视 ...

  5. [翻译] DDExpandableButton

    DDExpandableButton https://github.com/ddebin/DDExpandableButton Purpose - 目的 DDExpandableButton is a ...

  6. 使用UICollectionView

    使用UICollectionView 使用UICollectionView的流程: 1. 设定一个UICollectionViewFlowLayout 2. 使用这个设定的UICollectionVi ...

  7. December 01st 2016 Week 49th Thursday

    Life is a maze and love is a riddle. 生活是个迷宫,爱情是个谜语. I am lost in both. Can you provide me some guida ...

  8. php中empty(),isset(),is_null(),==,===区别

    有关 PHP 的 empty(),isset() 还有 is_null() 这三个函数的用法讨论得已经很多了,而且很多资料也未必能说得很清楚.这里再重复一次,但不是从概念去说,直接用程序例子来说话,应 ...

  9. 只要下面看到func() 带括号的,就会弹上去找对应的函数,然后执行相应的函数块

    def func1(): print("呵呵")def func2(): print("呵呵")def func3(): print("呵呵" ...

  10. 关于前端惰性加载(jquery_lazyload)的使用和原理分析

    1.前言 有时我们会有这样的需求,当网页有很多张图片的时候,我们不希望一次性就把图片加载完,而是希望当浏览器滑动到指定位置的时候再加载,这样可以节省带宽,它也能帮助减轻服务器负载.那么这种需求就需要利 ...