在用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. （五）Hololens Unity 开发之 手势识别

    学习源于官方文档 Gestures in Unity 笔记一部分是直接翻译官方文档,部分各人理解不一致的和一些比较浅显的保留英文原文 (五)Hololens Unity 开发之 手势识别 HoloLe ...

  2. LoadRunner 调用Dll完成加密解密

    LoadRunner里的函数比较少,没有MD5.Base64加密. 我们可以通过在C++里把一些加解密写成函数,供LR调用. DLL函数编写 C++里新建工程Class Library(此处是用VS2 ...

  3. css3 UI 修饰——回顾

    1.box-shadow 属性向框添加一个或者多个阴影. 语法: box-shadow: h-shadow v-shadow blur spread color inset h-shadow 必须,水 ...

  4. 获取Pid

    Java程序中获取当前进程的进程ID 标签: javainterfacesystemcompilationjvmjni 2011-12-29 16:31 15182人阅读 评论(2) 收藏 举报  分 ...

  5. Git合并分支命令：git merge --ff

    今天研究了一下git merge命令常用参数,并分别用简单的例子实验了一下,整理如下: 输入git merge -h可以查看相关参数: --ff  快速合并,这个是默认的参数.如果合并过程出现冲突,G ...

  6. DHCP协议

    来源摘取自百度百科 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作, 主要有两个用途:给内部网络或网络服 ...

  7. 情人节，教大家使用css画出一朵玫瑰花。

    情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...

  8. option触发事件两种方法总结

    代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <tit ...

  9. CentOS下WDCP下的MYSQL开启远程连接

    1.首先要在防火墙开启3306端口访问 2.然后做如下操作 如何开启MySQL的远程帐号-1)首先以 root 帐户登陆 MySQL 在 Windows 主机中点击开始菜单,运行,输入"cm ...

  10. shell基础学习系列（一）

    打开文本编辑器,新建一个文件,扩展名为sh(sh代表shell),扩展名并不影响脚本执行. 输入一些代码: #!/bin/bash echo "Hello World !" &qu ...