js——行间样式与非行间样式

对于行间样式与非行间样式，这里做一下总结，方便大家查阅。

首先提下两个概念：行间样式与非行间样式
行间样式：行间样式就是写在标签体内的样式：如，<div style="color:red"></div>，在这里color样式就是行间样式。
非行间样式：非行间样式就是指不是写在标签体内的style属性的样式。如<style>....</style>内的定义的样式或引用的外部css文件都是非行间样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>行间样式与非行间样式</title><style type="text/css">*{margin: 0;padding: 0;}#box{ font-size:20px; color:black;}</style>
</head>
<body><div id="box" style="color:red;">China</div>
</body>
<script>//js代码
</script>
</html>

js中获取CSS样式有以下两种方法：

1、获取行间样式（可读可写）

var oBox = document.getElementById('box');
console.log(oBox.style.color);     // red
console.log(oBox.style.fontSize);  // ''   obj.style[attr] 只能获取行间样式，不能获取非行间样式
oBox.style.color = 'black';

2、获取非行间样式只读 (返回的是当前元素应用的最终CSS属性值（包括外链CSS文件，标签中嵌入的style属性等）)

function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值if(obj.currentStyle){       //针对ie获取非行间样式return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];   //针对非ie};
};

3、行间样式（ele.style）与非行间样式（getComputedStyle或currentStyle）的区别
a、ele.style 只能读取行间样式，而getComputedStyle或currentStyle获取的是元素最终的css样式；
b、ele.style 是可读可写的，而getComputedStyle或currentStyle 是只读的；
console.log(getStyle(oBox,'color'))

参考链接：
http://www.jb51.net/article/92551.htm
http://www.cnblogs.com/JamKong/p/4967815.html
http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

js——行间样式与非行间样式相关推荐

[js]写一个获取非行间样式的方法
[js]写一个获取非行间样式的方法 window.getComputedStyle()?window.getComputedStyle(element).attribute:element.curre ...
JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式
当网页被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model),在DOM中,每个东西都是节点. DOM四大操作:查找.更新.添加.删除通过DOM,JavaScri ...
JS一起学05：Date对象、封闭空间、函数传参和封装、获取非行间样式、字符串操作
一.Date对象 1. 获取 oDate.getFullYear() 获取年份 oDate.getMonth()+1 获取月份 0-11----->1-12 oDate.getDate() 获 ...
js获取非行间样式--有bug，忧伤
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JS(函数返回值、获取非行间样式、函数封装、函数复用、定时器)
// 函数返回值 // 什么时候需要用:函数外想要使用内部的数据的时候 // 语法: return 返回值 // 1.返回回函数里的值 function fun1 (){ var a = 1; ret ...
非行间样式函数封装代码复用定时器
1.获取行间样式标签.style.样式名如果样式名是-链接使用驼峰命名例如font-size fontSize ==标签.style.样式名只能获取行间样式== 2.获取非行间样式和行间样式 ...
javascript-数据类型,json与数组,获取非行间样式
一.javascript组成: 1.ECMAScript 解释器 2.DOM (文档对象模型:document object model) document 3.BOM(浏览器对象模型:brow ...
JavaScript提取非行间样式
提取行间样式一般格式 object.style.width=value; 提取非行间样式 IE浏览器下的写法:obj.currentStyle.name 火狐浏览器或者谷歌浏览器的写法:g ...
获取非行间样式的获取
当我们的样式写在行间的时候,JS可以通过style获取, 然而style也只能获取或操作行间样式,当我们需要获取非行间的样式时, 应该采用什么方法呢? 首先定义一个div并为他设置样式: <st ...
DOM对象,节点,获取元素的非行间样式,元素的偏移量等属性词
获取页面中的元素的方法作用: 通过各种方式获取页面中的元素以前我们说过, id 可以直接使用这个方法只能通过 id 获取今天学的就是使用各种方式比如: id, 类名, 标签名, 选择器的方 ...

js——行间样式与非行间样式

js——行间样式与非行间样式相关推荐

最新文章

热门文章