在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象,
第一种:无法读取,能直接赋值
如下:
<!DOCTYPE html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content=" "/> <style> div{ 300px; height:300px; border:1px solid blue; } </style> </head> <body> <div> <p> 12345 </p> </div> </body> <script> var div=document.getElementsByTagName('div')[0]; alert(div.style.width); div.style.width='600px'; </script> </html>
第二种:无法进行计算后的赋值,
div.style.width=parseInt(div.style.width)+100+'px';
这行代码不起作用
解决方式:这种情况下就要用到obj.currentStyle和getComputedStyle()这两个函数来先读取到width的值,然后进行计算,再赋值。
<script> function getStyle(obj,attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr]; } function t1() { var div=document.getElementsByTagName('div')[0]; div.style.width=parseInt(getStyle(div,'width'))+5+'px';//两个方法获取对象为只读 } </script>
第三种:先直接赋值,然后进行计算后赋值,这样能够两次都赋值
即:
<script> var div=document.getElementsByTagName('div')[0]; alert(div.style.width); div.style.width='600px'; alert('。。。'); div.style.width=parseInt(div.style.width)+100+'px'; </script>
这是因为在前一次赋值计算中:div.style.width='600px';已经给他赋了行内css值,所以后面一个进行计算后赋值时可以读取到并赋值。
已解决~~~