DOM与元素节点内联样式
获取、设置及移除单个内联 CSS 属性
每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性。
<div style='background-color:black; height:100px; width:100px'></div>
<script>
var divStyle = document.querySelector('div').style;
// 输出一个 CSSStyleDeclaration 对象,仅包含该元素的内联样式
console.log(divStyle);
// set
divStyle.backgroundColor = 'red';
// get
console.log(divStyle.backgroundColor);
// remove
divStyle.backgroundColor = '';
// style 对象是个 CSSStyleDeclaration 对象,它不仅提供了单个 CSS 属性的访问方式
// 也提供 setProperty()、getPropertyValue()以及removeProperty() 方法
// set
divStyle.setProperty('height', '200px');
// get
console.log(divStyle.getPropertyValue('height'));
// remove
divStyle.removeProperty('height');
</script>
注意: style 对象中的属性名并不含 CSS 属性名中常用的横线。转译非常简单,移除横线并使用驼峰体。其中一个不能直接转换的 CSS 属性是 float,由于 float 是 Javascript 的保留字,因此不能用作属性名。“DOM2级样式”规范规定样式对象上相应的属性名应该是 cssFloat,ff、Safari、opera和chrome都支持这个属性,而 IE 支持的则是 styleFloat。
获取、设置及移除所有内联 CSS 属性
<div style='background-color:black; height:100px; width:100px'></div>
<script>
var div = document.querySelector('div')
, divStyle = div.style;
// 使用 CSSStyleDeclaration 对象的 cssText 属性,和 getAttribute() 与 setAttribute() 方法
// 可以用 Javascript 字符串获取、设置及移除 style 属性的整个值(即所有内联 CSS 属性)
divStyle.cssText = '';
divStyle.cssText = 'background-color:red; height:200px; width: 200px';
// ----
div.setAttribute('style', 'background-color:blue; height:100px; width:100px');
console.log(div.getAttribute('style'));
div.removeAttribute('style');
</script>
使用 getComputedStyle() 获取元素的已计算样式
style 属性值只包含通过 HTML 中的 style 属性定义的 CSS。要获得元素级联包括内联样式后的 CSS(即从内联样式表单,外部样式表单和浏览器样式表单级联),你可以用 getComputedStyle()。该方法提供一个只读的类似 style 的 CSSStyleDeclaration 对象。这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如":hover"),如果不需要伪元素信息,第二个参数可以为 null。
<style>
div {
background-color: black;
width: 100px;
}
</style>
<div style='background-color:red; height:100px';></div>
<script>
// document.defaultView 在浏览器中即为 window 对象
var divStyle = document.defaultView.getComputedStyle(document.querySelector('div'), null);
console.log(divStyle.width); // 100px
</script>
getComputedStyle() 方法遵照 CSS 声明优先级(内联 > style > link),同时它所返回的 CSSStyleDeclaration 对象不能设定任何值,因为它是只读的。
IE 不支持 getComputedStyle() 方法,但它有一种类似的概念,在 IE 中,每个具有 style 属性的元素还有一个 currentStyle 属性,这个属性是 CSSStyleDeclaration 的实例,包含当前元素全部计算后的样式,同样只是可读。
<style>
div {
background-color: black;
width: 100px;
}
</style>
<div id='div'style='background-color:red; height:100px';></div>
<script>
// 我也不知道为啥要用onload,去掉就报错说找不到对象...
window.onload = function() {
var divStyle = document.getElementById('div').currentStyle;
console.log(divStyle.width); // 100px
}
</script>
兼容写法(2016-03-14 add):
function getStyle(ele, type) {
if (window.getComputedStyle)
return window.getComputedStyle(ele, null)[type];
else
return ele.currentStyle[type];
}
DOM与元素节点内联样式的更多相关文章
- Vue学习之路第十二篇:为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- v-bind指令动态绑定class和内联样式style
动态绑定class—概述 数据绑定(v-bind指令)一个常见需求是操作元素的 class 列表.因为class是元素的一个属性,我们可以用 v-bind 处理它们 我们只需要计算出表达式最终的字符串 ...
- JavaScript 获取和修改 内联样式
JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...
- 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
- JS获取内联样式
JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj. ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- html块级元素和内联元素小结
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- (转) html块级元素和内联元素区别详解
http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...
随机推荐
- Linux umount设备时出现device is busy解决方法
在Linux中,有时使用umount命令去卸载LV或文件时,可能出现umount: xxx: device is busy的情况,如下案例所示 [root@DB-Server u06]# vgdisp ...
- Sqlite学习笔记(一)&&编译安装
Sqlite简介 sqlite是一个开源的嵌入式文件数据库,sqlite以动态链接库的方式供应用程序调用,所有的数据库对象都存储在同一个文件中. sqlite动态库非常小,最新的3.8.11版本也只有 ...
- PHP 类型判断和NULL,空值检查
PHP是一种宽松类型的编程语言,在函数中对传入的参数值的“类型”以及”值是否为空或者NULL“进行检查是不可缺少的步骤. 类型检查 从PHP5开始,PHP允许对函数的参数进行类型约束,即可以约束参数的 ...
- spring hibernate摘记
一.spring 1.ContextLoaderListener 它作用就是启动Web容器时,自动装配ApplicationContext的配置信息.因为它实现了ServletContextLi ...
- 用批处理来自动化项目编译及部署(附Demo)
阅读目录 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 介绍 详细 处理 结论 Demo下载 介绍 一个项目从立项开始,可能就已经根据公司的配置模板将 ...
- DDNS
一.DDNS简介 DNS,域名系统,是因特网的一项服务,它作为将域名和IP地址相互映射的一个分布式数据库,能够使人们更方便的访问互联网. DDNS,动态域名系统,是域名系统(DNS)中的一种自动更新名 ...
- node js学习(一)
1.简介 JavaScript是一种运行在浏览器的脚本,它简单,轻巧,易于编辑,这种脚本通常用于浏览器的前端编程,但是一位开发者Ryan有一天发现这种前端式的脚本语言可以运行在服务器上的时候,一场席卷 ...
- [转]ASP.NET MVC Dynamic Themes
本文转自:http://www.codeproject.com/Articles/32847/ASP-NET-MVC-Dynamic-Themes Download source code - 148 ...
- C#基础---IComparable用法,实现List<T>.sort()排序
List<T>.sort()可以实现对T的排序,比如List<int>.sort()执行后集合会按照int从小到大排序.如果T是一个自定义的Object,可是我们想按照自己的方 ...
- Uva 11395 Sigma Function (因子和)
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=109329#problem/C 题目在文末 题意:1~n (n:1~1012)中,因子 ...