• 用js控制css属性


    在用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值,所以后面一个进行计算后赋值时可以读取到并赋值。

    已解决~~~

  • 相关阅读:
    SQL中的数字格式化 (收藏)
    read about用法
    run into用法
    shoot for用法
    take off用法
    英语成语
    bring up用法
    satisfy with用法
    spend用法
    Linux环境进程间通信:共享内存
  • 原文地址:https://www.cnblogs.com/sunshinewei/p/4739572.html
Copyright © 2020-2023  润新知