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)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...
随机推荐
- DROP_SNAPSHOT_RANGE过程不能清理表RM$_SNAPSHOT_DETAILS
今天在测试.验证DROP_SNAPSHOT_RANGE不能彻底快照的过程中遇到了DROP_SNAPSHOT_RANGE无法清理WRM$_SNAPSHOT_DETAILS表中数据的情况,测试服务器版本为 ...
- EMD_MAINTENANCE.EXECUTE_EM_DBMS_JOB_PROCS的删除创建
在最近的一次优化过程中发现了ORACLE 10g中一个作业EMD_MAINTENANCE.EXECUTE_EM_DBMS_JOB_PROCS执行相当频繁,其实以前也看到过,只是没有做过多的了解和关注. ...
- apache 虚拟主机详细配置:http.conf配置详解
apache 虚拟主机详细配置:http.conf配置详解 Apache的配置文件http.conf参数含义详解 Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd. ...
- mysql-3 检索数据(1)
SELECT 语句 SELECT检索表数据,必须至少给出两条信息--------想选择什么,以及从什么地方选择. 检索一个列 SELECT prod_name FROM products; 上述语句利 ...
- 《Java JDK7 学习笔记》课后练习题2
1.如果在hello.java中撰写以下的程序代码: public class Hello { public static dmain(String[]args) { Sys ...
- my_strstr()
const char* my_strstr(const char* S1,const char* S2){ int i=0,flag=0; while('\0'!=*(S1+i)){ if(*(S1+ ...
- x01.os.13: 文件系统
停了两天电,忽然得空闲.找来破吉他,已然不成弦. 丁丁当当敲,敲到电来到.为把时间捡,熬夜三四点. 从我的置顶随笔 x01.Lab.Download 中下载 x01.os.12.t ...
- 利用NuSoap开发WebService(PHP)
利用NuSoap开发WebService(PHP) 分类: php 2010-09-08 12:00 5005人阅读 评论(1) 收藏 举报 webservicephpsoapstringencodi ...
- lsll 加载段限长指令
static inline unsigned long get_limit(unsigned long segment) { unsigned long __limit; __asm__(&quo ...
- python paramiko
paramiko 遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接,可以实现远程文件的上传,下载或通过ssh远程执行命令. 项目地址:https://github.com/paramik ...