CSS 到 DOM的抽象
通过操作 CSS 对应的 DOM对象来更新CSS样式
换肤操作
如何获取实际的样式（不仅有行内，更有页面和外联样式表中定义的样式）

样式表分为三类：外联，页面，行内

内部样式表

<style type="text/css">

   body{margin:30;}

   p{color:#aaa;line-height: 20px;}

</style>

element.sheet.cssRules

element.sheet.cssRules[1] <---> p{color:#aaa;line-height: 20px;} //cssRules中的『第二条rule』

.style <---> color:#aaa;line-height: 20px; //rule的『css声明（属性名和属性值的键值对）』

.lineHeight //通过『属性名』获得『属性值』

.selectorText <---> p //这条rule的选择器

我们可以通过这种方式查询，修改，删除css样式。

style，是CSSStyleDeclaration类的一个对象，CSSStyleDeclaration是一个键值对列表

样式属性--行内样式

<p style="color:red;">paragraph</p>

element.style <---> color:red

element.style.color <--->red

更新样式

element.style

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css行内样式操作</title>

</head>

<body>

    <input type="text" name="phone" id="phone">

</body>

<script type="text/javascript">

    var input=document.getElementsByTagName('input');

    //DOM写法

    input[0].style.borderColor='red';

    input[0].style.color='red';    

    //css写法

    input[0].style.cssText = 'border-color:red;color:red;';  

</script>

</html>

上面DOM写法和 CSS写法效果是相同的。

缺点：样式混在js的逻辑当中。为了解决这个维护成本，改为了下面的『更新class』

更新class

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css行内样式操作</title>

    <style type="text/css">

    .invalid{

            border-color:red;

            color: red;

    }

    </style>

</head>

<body>

    <input  type="text" name="phone" id="phone">

</body>

<script type="text/javascript">

    var input=document.getElementsByTagName('input');

    input[0].className+='invalid';  //将元素的className替换成 css样式 invalid

</script>

</html>

通过 javascript操作元素的className DOM属性，增加了invalid样式。

缺点: 遇到『换肤』这种需要替换大量样式替换操作的时候，更新class方式也显得太繁琐。所以应该考虑【一次性更新很多元素的样式--更新样式表】

一次性更新很多元素的样式--更新样式表

换肤.html

<!DOCTYPE html>

<html>

<head>

    <title>DOM属性操作</title>

    <link rel="stylesheet" type="text/css" href="base.css">

    <link id="skin" rel="stylesheet" type="text/css" href="skin.spring.css">

    <style type="text/css">

        body{margin:30;}

        p{color:#aaa;line-height: 20px;}

    </style>

</head>

<body>

    <p>paragraph</p>

    <input type="button" name="" value="换肤" id="changeSkin">

</body>

<script type="text/javascript">

var changeSkin_btn=document.getElementById('changeSkin');

changeSkin_btn.onclick=function (){

    var skinStyle=document.getElementById('skin');

        skinStyle.href='skin.summer.css';

}

</script>

</html>

skin.spring.css

body{

    background: green;

}

p{

    color:yellow;

}

skin.summer.css

body{

    background: orange;

}

p{

    color:blue;

}

获取样式

element.style---只能获得行内样式，而外联、页面样式表中的样式通过element.style是无法获取的。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>获取样式</title>

</head>

<body>

<input type="text" >

</body>

<script type="text/javascript">

    var input = document.getElementsByTagName('input')[0];

    var color=input.style.color;  //element.style 针对的是内嵌(行内)的样式表

    console.log(color); // “”

</script>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>获取样式</title>

</head>

<body>

<input type="text" style="color: red;">

</body>

<script type="text/javascript">

    var input = document.getElementsByTagName('input')[0];

    var color=input.style.color;  //element.style 针对的是内嵌(行内)的样式表,所以获取到的为 ""

    console.log(color); //red

    //所以说element.style获取到的不一定是实际样式（实际样式可能来自外联样式、页面样式）,而外联样式表、页面样式表中的样式无法通过element.style获取, element.style只能获得行内样式

</script>

</html>

缺点：无法获取实际的样式（无法获取外联、页面样式表中的样式）。为了获得实际样式，需要使用『window.getComputedStyle()』

var style=window.getComputedStyle(element[,pseudoElt]);----获取实际样式

<input type="text" >

var input = document.getElementsByTagName('input')[0];

color=window.getComputedStyle(input).color

console.log(color);//rgb(0, 0, 0)  获得实际样式

console.log(input); //打印出input.style对象(element.style是CSSStyleDeclaration类的一个对象)

CSSStyleDeclaration

注意：IE9—使用element.currentStyle

在文章最末尾补充一张 CSS 在DOM中的类结构图

学习资料：网易前端微专业课程

DOM样式操作的更多相关文章

jQuery使用（二）：DOM样式操作和属性操作
DOM取值与赋值 .html() .text() .size() 1.html()方法类似原生DOM的属性innerHTML,不传入参数的时候默认为取指定元素内的HTML内容,包含前后空白文本结构,以 ...
Dom样式操作-属性操作
1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...
DOM 样式操作
通过js动态的修改样式更新样式的方法:一.使用.style方法修改样式,缺点是使样式混杂在js中,再次修改不易.二.更新class属性,更改样式.三.一次性更改很多元素样式(如换肤操作),更改样式表 ...
JQuery DOM操作、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...
javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
Dom的样式操作和属性操作
如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...
dom操作属性操作样式操作
jQuery DOM操作 1 插入子元素 append('<img>') 插后面被插入元素调用 appendTo('<img scr="...">') 新 ...
JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法语法:$(selector).attr(name|prop ...

随机推荐

关于ajax的同步和异步
今天在开发中遇到个ajax访问Action 返回json 拼接Html,有时候能显示,有时候显示不出来. 考虑后一定是页面元素加载的问题. 所以把jq ajax设置为同步. 同步意为当访问后台代码时, ...
C# ACCESS数据库操作类
这个是针对ACCESS数据库操作的类,同样也是从SQLHELPER提取而来,分页程序的调用可以参考MSSQL那个类的调用,差不多的,只是提取所有记录的数量的时候有多一个参数,这个需要注意一下! usi ...
MySQL MHA配置常见问题
MHA在MySQL数据库中被广泛使用,它小巧易用,功能强大,实现了基于MySQL replication架构的自手动主从故障转移,从库重定向到主库并自动同步.尽管如此,在部署配置的过程中,由于疏忽总难 ...
字典树（Trie树）
1. trie基础 (1) 是什么? Trie,又称单词查找树或键树,是一种树形结构,是一种哈希树的变种. (2) 性质根节点不包含字符,除根节点外每一个节点都只包含一个字符从根节点到某一节点,路 ...
15天玩转redis —— 第六篇有序集合类型
今天我们说一下Redis中最后一个数据类型 “有序集合类型”,回首之前学过的几个数据结构,不知道你会不会由衷感叹,开源的世界真好,写这些代码的好心人真的要一生平安哈,不管我们想没想的到的东西,在这个 ...
走进异步世界：EnyimMemcached异步化改造引起的内存泄漏
6月30日我们发布了异步化改造后的博客程序之后,出现了高内存.高CPU.高线程数的不理想情况. 经过一周的追查,终于水落日出——引起不理想情况的根源是我们修改过的EnyimMemcached代码存在内 ...
Web.config配置文件详解
整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. <?xml v ...
【C#进阶系列】20 异常和状态管理
异常就是指成员没有完成它的名称所宣示的行动. public class Girl { public string Name { get; set; } } public class Troy{ Gir ...
Java递归列出所有文件和文件夹
package file_op; import java.io.File; public class file_list { static int n =0; /** * @param args */ ...
优化JavaScripe 提升首页加载速度的几种方案解析
优化目的: 1. 减少load量. 2. 优化js,加快页面加载速度. 网站中最影响网站打开速度的是什么?我会告诉是网站中的javascript,简称JS.模板中引用的JS文件越多,打开速度越慢,细读 ...

DOM样式操作