Javascript 修改与获得style
当我们不使用框架时, 经常使用如下的方法修改某个元素的样式.
document.getElementById('test').style.color = 'red';
document.getElementById('test').style.left = '15px';
基本上每个css属性, javascript都有一个对应的style键名对应, 如 top, font, 对于css中的带有 - 的属性如font-size等, 则改成驼峰命名式即可. 例:
document.getElementById('test').style.fontSize = '14px';
记住, 写上px这样的单位是个好习惯, 因为在某些css模式下, 不写单位, 浏览器会因为不知道具体的单位标准而不做任何事情.
在读取时, 使用style属性就不见得一定有用了. 如下面的两端代码:
代码一:
<script type="text/javascript">
alert(document.getElementById('test').sytle.left);
</script>
<style type="text/css">
#test {left: 10px; position:absolute;}
</style>
代码二:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
alert(document.getElementById('test').sytle.left);
</script>
</head>
<body>
<div id="test" style="left:10px; position:absolute;"></div>
</body>
</html>
第一段代码弹出空, 第二段代码弹出10px.
那么如果需要读取一个元素的某些属性呢, 如margin, left等呢? 有两种方式:
1. currentStyle(IE Only)
2. window.getComputedStyle() [W3C标准, Mozilla和Opera支持].
代码一:
document.getElementById('test').currentStyle.left;
代码二:
var x = document.getElementById('test');
alert(window.getComputedStyle(x,null).color);
更多内容请参考<<ppk谈JavaScript>>