在用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. (二)Lua脚本语言入门

    上一篇文章忘了插入代码了,方便粘贴复制...... 函数 对于c语言就是 void aa()//c语言是用void { print("这是一个函数") } Lua就变成了 func ...

  2. C++ 头文件系列(iterator)

    简介 该头文件围绕迭代器展开,定义了一系列与迭代器有关的概念,但最最最重要的一点就是----它和其它容器一起实现了C++容器的Iterator设计模式. Iterators are a general ...

  3. HDU 3783 ZOJ

    ZOJ Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  4. 一个web应用的诞生--数据存储

    上一章实现了登录的部分功能,之所以说是部分功能,是因为用户名和密码写成固定值肯定是不可以的,一个整体的功能,至少需要注册,登录,密码修改等,这就需要提供一个把这些值存储到数据库的能力. 当前的主流数据 ...

  5. Sass与Compass——回顾

    compass 是sass的一个工具库 compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能, 安装: compass是用 ruby语言开发的,所以安装它之前必须安装 ...

  6. eeclipse使用快捷键

    eclipse块注释: 方式一:多行“//”注释 在Eclipse中拖动鼠标,选中需要注释的代码 Ctrl+Shift+C会发现所选代码被“//”注释掉.当调试完后,可再次按住Ctrl+Shift+C ...

  7. 1.使用SignalR实现页面即时刷新（服务端主动推送）

    模块功能说明: 实现技术:sqlserver,MVC,WebAPI,ADO.NET,SignalR(服务器主动推送) 特殊车辆管理--->移动客户端采集数据存入数据库---->只要数据库数 ...

  8. 1.1XAF框架开发视频教程-简单的订单管理实现过程,视频,提纲,及教程源码

    下面是视频教程的提纲: PPT版本的提纲下载 本节源码下载 XAF框架开发教程 快速实现企业级信息系统开发的利器 XAF简介 ´  开发公司:www.devexpress.com,老牌控件公司 ´  ...

  9. css中书写小三角

    我们在开发过程中,有很多的方向标签不是图片,而是用css方法书写上去的. 首先我们要了解原理,border的边框的脚步是45度角. 向左方向: width:0px: height:0px: borde ...

  10. MVC - 单点登录中间件

    本章将要和大家分享的是一个单点登录中间件,中间件听起来高深其实这里只是吧单点登录要用到的逻辑和处理流程封装成了几个方法而已,默认支持采用redis服务保存session的方式,也可以使用参数Func& ...