javascript 获取特定的 CSS属性值
javascript代码获得CSS文件声明特定样式某属性值。如：
Example Source Code
<link id="system_style" type="text/css" href="global.css" rel="stylesheet"/>
global.css声明
Example Source Code
#myArticle{
width:400px;
height:300px;
}
<div id="myArticle">
...
</div>
这样情况，直接通过JS进行getElementById(’myArticle’).style.width无法获取400px值，因这数值定CSS里，所，必须其方法，写函数：
Example Source Code
function getStyleValue(css_file_id,labname,param)
{
var tar;
var rss;
var style;
var value;
tar = document.styleSheets[css_file_id];
rss = tar.cssRules?tar.cssRules:tar.rules
for(i=0;i<rss.length;i++)
{
style = rss[i];
if(style.selectorText.toLowerCase() == labname.toLowerCase())
{
value = style.style[param];
}
}
return value;
}
现只通过
Example Source Code
getStyleValue(0,'#myArticle','width')
获得400px
CSSStyleSheet对象
通过 document.styleSheets 访问到CSSStyleSheet的集合。其中每一个元素是一个CSSStyleSheet，就是从样式文件引入或用<style type="text/css"></style>定义的一个样式列表。
属性disabled : true or false ,该样式是否可用。
属性cssRules : 所有样式的列表，在ie中要用rules
useage : document.styleSheets[0].cssRules[0].selectorText
CSSStyleRule对象
上面的cssRules 取到的就是CSSStyleRule对象的集合，每一个CSSStyleRule对象就是一条css样式。
cssText属性：以字符串形式表示了当前状态的全部规则（ie不支持）。
useage : document.styleSheets[0].cssRules[0].cssText
selectorText 属性: 规则的选择符。（.className）
style属性 ： 与HTMLElement.style取得的对象类似，取得了一个CSSStyleDeclaration对象的引用。
CSSStyleDeclaration对象
上面style属性取到的就是一个CSSStyleDeclaration对象，包含了一条样式的所有样式属性。
cssText属性：以字符串形式表示了当前状态的全部规则（ie可以支持这个）。
useage : document.styleSheets[0].cssRules[0].style.cssText
鼠标指针位置坐标
| 属性 | 描述 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
客户区指的是当前窗口。语法
event.clientX
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。
客户区指的是当前窗口。语法
event.clientY
下面的例子可显示出事件发生时鼠标指针的坐标：
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X coords: " + x + ", Y coords: " + y)
}
</script>
</head>
<body οnmοusedοwn="show_coords(event)">
<p>Click in the document. An alert box will alert
the x and y coordinates of the mouse pointer.</p>
</body>
</html>
