DOM样式操作
- 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 ...
随机推荐
- C# 异步工具类 及一点小小的重构经验
2015年新年第一篇随笔, 祝福虽然有些晚,但诚意还在:新年快乐. 今天主要是想分享一异步工具类,在C/S架构中.先进行网络资源异步访问,然后将回调函数 Invoke到UI线程中进行UI处理. 这样的 ...
- [Asp.net 5] Localization-简单易用的本地化-全球化信息
本篇比较简单介绍Localization解决方案中: Microsoft.Framework.Globalization.CultureInfoCache 工程 CultureInfoGenerato ...
- 开发ASP.NET MVC设置统一的命名空间
当你创建一个全新的ASP.NET MVC专案之后,你想设置统一的命名空间,从可以下面几次入手. 首先设置专案的属性: 第二步,打开Views/Web.config文件,修改: 第三步,修改路由文件的命 ...
- Ext.NET 4.1 系统框架的搭建(后台) 附源码
Ext.NET 4.1 系统框架的搭建(后台) 附源码 代码运行环境:.net 4.5 VS2013 (代码可直接编译运行) 预览图: 分析图: 上面系统的构建包括三块区域:North.West和C ...
- ISP接口隔离原则
一.定义 不应该强迫客户程序依赖并未使用的方法 二.接口污染 接口污染,在C#.C++这样的静态类型语言中是很常见的.一个接口会被他不需要的方法污染.在接口中假如一个方法只是为了能给它的一个子类带来好 ...
- 提高生产性工具 - Model代码生成器（二）
首先,我想阐述一下我开发这个工具的一个观点. 如果大家做过对日软件的话,很多时候,日方是进行设计的,数据模型是什么样子的,各个字段的类型,需要做什么验证,验证规则,错误信息,都是日方制定的. 外包就是 ...
- 背水一战 Windows 10 (1) - C# 6.0 新特性
[源码下载] 背水一战 Windows 10 (1) - C# 6.0 新特性 作者:webabcd 介绍背水一战 Windows 10 之 C# 6.0 新特性 介绍 C# 6.0 的新特性 示例1 ...
- java 四舍五入保留小数
// 方式一: double f = 3.1516; BigDecimal b = new BigDecimal(f); double f1 = b.setScale(2, BigDecimal.RO ...
- Spring4学习笔记1-HelloWorld与IOC和DI概述
1.安装环境 1.1安装eclipse,jdk 1.1安装Spring tool suite(非必要项) 2.spring HelloWorld 2.1 需要的jar包(spring官网下载:http ...
- Vis.js – 基于浏览器的动态 JavaScript 可视化库
Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...