在用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. 浅谈Django的Q查询以及AngularJS的Datatables分页插件

    使用Q查询,首先要导入Q模块: from django.db.models import Q 可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象,Q对象也可以用~操作符放在前面表示否 ...

  2. 【java设计模式】之 建造者（Builder）模式

    我们还是举上一节的例子:生产汽车.上一节我们通过模板方法模式控制汽车跑起来的动作,那么需求是无止境的,现在如果老板又增加了额外的需求:汽车启动.停止.鸣笛引擎声都由客户自己控制,他想要什么顺序就什么顺 ...

  3. css 样式重置

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...

  4. 笔记之《用python写网络爬虫》

    1 .3 背景调研 robots. txt Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站 ...

  5. 读书笔记 effective c++ Item 9 绝不要在构造函数或者析构函数中调用虚函数

    关于构造函数的一个违反直觉的行为 我会以重复标题开始:你不应该在构造或者析构的过程中调用虚函数,因为这些调用的结果会和你想的不一样.如果你同时是一个java或者c#程序员,那么请着重注意这个条款,因为 ...

  6. React库

    一.React概述 React是一个是一个开源的js库,用来为数据渲染视图的,由facebook,Instagram社区维护的.(例如美团.阿里.airbnb都在使用React开发) 为什么会出现Re ...

  7. HTML中的a标签实现点击下载

    通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href: <a href=" ...

  8. ubuntu的常用命令

    1. locate------根据名字找文件,例如: locate php.ini 2.find----------以目录结构的形式搜索文件, 例如:find / -type d -iname jvm ...

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

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

  10. 认识ionic2

    1. Ionic 2 介绍 Ionic 2专注于以标准的HTML.CSS和JavaScript来构建移动站点,并可以通过Cordova打包成移动 App,只需编写一次代码,就可以分别部署到iOS.An ...