在用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. 关于WIN10开机无法输入密码的问题

    昨日,电脑 遇到了开机无法输入密码的问题,神烦. 作为一个计算狗,怎么能直接装系统(百度了一堆方法,装系统,果真万能)呢. 所以,深刻的分析了下. 1 .首先说明基本情况. 计算机品牌:ASUS 系统 ...

  2. MySQL5.7免安装教程

    注如果连文件位置都和我这个一样的话,基本上所有命令都可以直接复制这上面就行,前提是你愿意放到C盘的并在Program files下面新建一个文件夹mysql存放这些东西 建议大家还是自己动手配置一下这 ...

  3. 【求Java工程师/专家】大型互联网公司急招

    互联网行业排名Top公司,目前项目扩张阶段,需求数量较多的JAVA中高端后台开发人员,需要有分布式系统开发经验,年后有找工作的同学可以联系我了. 工作地点:杭州 岗位要求: 1.精通Java SE和J ...

  4. jq操作img大小（动态修改）

    今天适配app页面是约到一个问题 当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸. 通过搜索,我们可以从网上找到实现此功能的jQuery代 ...

  5. SQLSERVER 中实现类似Mysql的 INSERT ON DUPLICATE KEY UPDATE

    通过SQLServer创建索引时,有一个IGNORE_DUP_KEY的选项,可以类似实现. IGNORE_DUP_KEY = { ON | OFF } 指定对唯一聚集索引或唯一非聚集索引执行多行插入操 ...

  6. <C++Primer>第四版 阅读笔记 第四部分 “面向对象编程与泛型编程”

    继承和动态绑定与数据抽象一起成为面向对象编程的基础. 模板使我们能够编写独立于具体类型的泛型类和泛型函数. 第15章 面向对象编程 面向对象编程基于三个基本概念:数据抽象.继承和动态绑定.在C++中, ...

  7. ArcGIS制图表达Representation-符号制作

    ArcGIS制图表达Representation-符号制作 by 李远祥 在ArcGIS的符号里面,存在着两种符号体系,一种是传统的标准符号体系,一种是制图表达符号体系.标准符号几乎被绝大部分ArcG ...

  8. sql增删查改

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. Linux系统（三）系统基础扫盲大全

    序言 如果大家都爱装逼,一般会偏爱使用安装最小化的liunx系统,那么你的系统就不带图形化的桌面功能,这样对于一个想装B的初学者来说,Liunx就是黑漆马虎,一望无际的黑屏,黑屏,如何快速的对liun ...

  10. C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务（上）

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(上)),不对的地方欢迎指出与交流. 章节出自<Professional C ...