在用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{

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

已解决~~~

用js控制css属性的更多相关文章

  1. JS控制css float属性的用法经验总结

    JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...

  2. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  3. 用JS控制CSS基本样式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...

  4. html页面中插入html的标签,JS控制标签属性

    html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...

  5. Vue.js 控制css样式

    <script src="https://unpkg.com/vue/dist/vue.js"></script> <style type=" ...

  6. JS 获取CSS属性值

    obj: 元素对象 attribute: 属性 返回值:该对象这个属性的值 function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM, ...

  7. js控制css时注意

    font-size:10px--------e.style.fontSize="10px " 属性名:font-size--------fontSize; 属性值:10px---- ...

  8. js 修改css属性值

    js不能修改样式表 但是可以修改元素:比如 <div id="test" class="star-rating"></div> 对于上面 ...

  9. js 添加css属性

    $(".active").css('border','1px solid #ddd')curLi.css('border','2px solid red')curLi.css('b ...

随机推荐

  1. datagridview数据绑定操作数据库实现增删改查

    DataSet数据集,数据缓存在客户端内存中,支持断开式连接.DataGridView控件绑定DataSet时,它自动的改变的DS的行的状态,而且在做增删改查的时候,可以借助SqlCommandBui ...

  2. Linux实战教学笔记12:linux三剑客之sed命令精讲

    第十二节 linux三剑客之sed命令精讲 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,前言 我们都知道,在Linux中一切皆文件,比如配置文件,日志文件,启动文件 ...

  3. 谨慎能捕千秋蝉（三）——界面操作劫持与HTML5安全

    一.界面操作劫持 1)ClickJacking ClickJacking点击劫持,这是一种视觉上的欺骗. 攻击者使用一个透明的.不可见的iframe,覆盖在网页的某个位置上,诱使用户点击iframe. ...

  4. 剖析Asp.Net Web API路由系统---WebHost部署方式

    上一篇我们剖析了Asp.Net路由系统,今天我们再来简单剖析一下Asp.Net Web API以WebHost方式部署时,Asp.Net Web API的路由系统内部是怎样实现的.还是以一个简单实例开 ...

  5. 支付宝App支付~关于它的一些坑

    坑这个词不仅在微信平台适用,在支付宝也一样的,下面我们来看一下我在做App支付时的一些坑! APP支持流程: 网站H5下单->向支付宝生成订单->回调app的js->app调用支付宝 ...

  6. 关于最优化读写，测试各个加锁：Lock、安全字典、信号量、ReaderWriterLock、ReaderWriterLockSlim

    大家对于自身项目中都有本地缓存的逻辑,但这块的读写何种机制下哪个快,哪个慢,需要测试对比,以下测试报告,期望给大家一个借鉴,如果有更好的测试结果也欢迎大家一起讨论. 以下测试是开启10个并发任务对同一 ...

  7. ASP.NET连接数据库配置文件

    // Web.Config <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NE ...

  8. [hadoop] - Container [xxxx] is running beyond physical/virtual memory limits.

    当运行mapreduce的时候,有时候会出现异常信息,提示物理内存或者虚拟内存超出限制,默认情况下:虚拟内存是物理内存的2.1倍.异常信息类似如下: Container [pid=13026,cont ...

  9. 智能打印SDK---官方博客

    (开源准备:开源为百度云打包开源,GIT太慢,SVN没有免费的,TFS有免费的也慢的要命) 开源地址:http://pan.baidu.com/s/1miobLoO 电子商务越来越成熟,提供的服务越来 ...

  10. AlloyTouch之select选择插件

    原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Simple-Select 写在前面 很多情况下,产品希望统一安卓和IOS select交互和样式. ...