1.操作对象的属性

注意：

标签属性与DOM对象属性的相应关系：

绝大部分2者是同样的。如：imgobj.src属性相应<img src="" >中src属性，但也有例外，如<div class="main" >中，操作class属性用divobj.className。

CSS属性与DOM对象属性的相应关系：

1. 两者通过obj.style.css属性名 相相应   如：obj.style.width。

2.假设CSS属性带有横线，如border-top-style  ，则把横线去掉并将横线后字母大写 。  如：obj.style.borderTopStyle。

样例：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>

	<title></title>

</head>

<style type="text/css">

	.test1{

		background: red;

	}

	.test2{

		background: green;

	}

</style>

<body>

<div class="test1"  onclick="a();" style="width:200px; height:200px; border-bottom:1px solid">

	点击div,使其背景色红绿交替，宽高添加5px,下边框增粗1px;

</div>

<script type="text/javascript">

	function a(){

		var div = document.getElementsByTagName('div')[0];

		if(div.className.indexOf('test1')>=0){

			div.className = 'test2';

		}else{

			div.className = 'test1';

		}

		div.style.width = parseInt(div.style.width)+10+'px';

		div.style.height = parseInt(div.style.height)+10+'px';

		div.style.borderBottomWidth = parseInt(div.style.borderBottomWidth)+1+'px';

	}

</script>

</body>

</html>

获取对象在内存中计算后的样式：

用obj.currenStyle 和window.getComputedStyle()获取。

注意：仅仅有IE和Opera支持使用currentStyle获取HTML Element的计算后的样式，其它浏览器不支持。标准的浏览器用getComputedStyle,IE9以上也支持getComputedStyle。

window.getComputedStyle(obj,伪元素);

參数说明：1.第一个參数为要获取计算后的样式的目标元素

2.第二个參数为期望的伪元素，如：‘：after’。‘：first-letter’等。一般设为 null。

function getStyle(obj,attr){

		 return obj.currentStyle ?

obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];

	}  //考虑兼容性，封装函数。

上述样例改动后的版本号：改动后的版本号将 CSS 的style属性放到了body之外。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>

	<title></title>

</head>

<style type="text/css">

	div{

		width: 200px;

		height: 200px;

		border-bottom: 1px solid black;

	}

	.test1{

		background: red;

	}

	.test2{

		background: green;

	}

</style>

<body>

<div class="test1"  onclick="a();" >

	点击div,使其背景色红绿交替，宽高添加5px,下边框增粗1px;

</div>

<script type="text/javascript">

	function getStyle(obj,attr){

		 return obj.currentStyle ?

obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];

	}  //考虑兼容性，封装函数。

function a(){

		var div = document.getElementsByTagName('div')[0];

		if(div.className.indexOf('test1')>=0){

			div.className = 'test2';

		}else{

			div.className = 'test1';

		}

		//alert(getStyle(div,'width'));

		//return;

		div.style.width = parseInt(getStyle(div,'width'))+10+'px';

		div.style.height = parseInt(getStyle(div,'height'))+10+'px';

		div.style.borderBottomWidth = parseInt(getStyle(div,'borderBottomWidth'))+1+'px';

	}

</script>

</body>

</html>

JavaScript中操作对象的属性的更多相关文章

  1. 全面理解Javascript中Function对象的属性和方法

    http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...

  2. javascript中document对象的属性和方法

    document.documentElement; document.firstChild;document.childNodes[0];// 取得对<html>的引用document.b ...

  3. JavaScript中的可枚举属性与不可枚举属性

    在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...

  4. JQuery中操作元素的属性_对象属性

    我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...

  5. JavaScript中的对象描述符(属性特性)

    我们先创建一个对象: var person = { name: "Nicholas", _job: "Software Engineer", sayName: ...

  6. javascript中的对象，原型，原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

  7. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  8. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  9. Javascript中的对象和原型(一)（转载）

    面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...

随机推荐

  1. 关于fetch

    前言: fetch是用来取代传统的XMLHttpRequest的. 它的优点很多,包括链式调用的语法.返回promise等. 什么是fetch? fetch api是基于promise的设计,它是为了 ...

  2. Laravel-错误调试与记录日志

    Laravel-错误调试与记录日志 标签(空格分隔): php 错误调试 配置 修改/config/app.php 'debug' => env('APP_DEBUG', true), 开启de ...

  3. error C4996: 'setmode': The POSIX name for this item is deprecated解决方案

    在使用VS2012编译zlib库官方提供的案例程序 zpipe.c 中代码时报错: 信息如下: 错误 1 error C4996: 'setmode': The POSIX name for this ...

  4. Android EditText+ListPopupWindow实现可编辑的下拉列表

    使用场景 AutoCompleteEditText只有开始输入并且与输入的字符有匹配的时候才弹出下拉列表.Spinner的缺点是不可以编辑.所以本文介绍如何使用EditText+ListPopupWi ...

  5. 增强for循环的使用详解及代码

    首先说一下他的语法结构: for(数据类型 变量 :集合){ //这里写要遍历的元素,或者所需要的代码即可//如果集合中存放的是对象,可以获取到每个对象(数据类型=对象类型 变量(遍历出来的每个对象) ...

  6. Python的matplotlib库画图不能显示中文问题解决

    有两种解决办法: 一种是在代码里设置为能显示中文的字体,如微软雅黑(msyh.ttf)和黑体(simsun.ttc) 如下在要画图的代码前添加: import matplotlib.pyplot as ...

  7. 谈谈Vim中实用又好记的一些命令

      本文的目的在于总结一些日常操作中比较实用.有规律的Vim命令,而不致于介绍一些基础的Vim知识,比如几种插入模式,hjkl移动命令,dd删除本行,p粘贴 等等,故对Vim基本知识不够熟悉的请参见其 ...

  8. 最短路径—Dijkstra 算法和Floyd 算法

    某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让行人很困扰. 现在 ...

  9. 手把手教你进行R语言的安装及安装过程中相关问题解决方案

    这篇文章旨在为R语言的新手铺砖引路,行文相对基础,希望对在R语言安装上有问题的小伙伴提供帮助和指引.一.什么是 R 语言R 编程语言被广泛应用在统计科学和商业领域. 在各种编程语言排名中 R 语言的排 ...

  10. 俩层判断，判断button是否可以点击

    描述如下: 当被保人数超过三个人并且input是必填项的时候button是disable为false的 代码如下: //起保日期 $('.pickerfour').on('tap', function ...