JS获取HTML样式

来源:转载

有些时候我们需要给页面添加动态效果,那么久需要获取一些HTML元素,但是很多时候都会遇到一些bug,得不到我们想要的结果,那么这个时候就需要用JS函数来解决了。


效果说明:随着页面打开的时间,DIV会越变越小,直到最后只有边框。文字“font-size”会以1PX为单位,不断增大。

效果图如下:


具体代码如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>获取样式</title> <style> #div1{ width: 200px; height: 200px; background: #F00; border: 4px solid; font-size: 12px; color: aquamarine; } </style> <script> window.onload = function () { startMove(); } function startMove() { setInterval(function () { var oDiv = document.getElementById('div1'); //alert(oDiv.style.width); oDiv.style.width = parseInt(getStyle(oDiv,'width'))-1+'px';//201 203 oDiv.style.fontSize = parseInt(getStyle(oDiv,'fontSize'))+1+'px'; },30) } //此函数获取行外样式,用于解决一些offset的bug function getStyle(obj,attr) { //currentStyle针对IE浏览器 if(obj.currentStyle){ return obj.currentStyle[sttr]; } //getComputedStyle针对firefox浏览器 else{ return getComputedStyle(obj,false)[attr]; } } </script></head><body><div id="div1"> font-size</div></body></html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: