JavaScript中操作对象的属性
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中操作对象的属性的更多相关文章
- 全面理解Javascript中Function对象的属性和方法
http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...
- javascript中document对象的属性和方法
document.documentElement; document.firstChild;document.childNodes[0];// 取得对<html>的引用document.b ...
- JavaScript中的可枚举属性与不可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...
- JQuery中操作元素的属性_对象属性
我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...
- JavaScript中的对象描述符(属性特性)
我们先创建一个对象: var person = { name: "Nicholas", _job: "Software Engineer", sayName: ...
- javascript中的对象,原型,原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
- JQuery 操作对象的属性值
通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...
- (转)javascript中event对象详解
原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解 博客分类: javaScript JavaScriptCS ...
- Javascript中的对象和原型(一)(转载)
面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...
随机推荐
- 知方可补不足~powerDesign为模型添加注释(让生成的SQL有注释)
事实上powerDesign本身就有这个功能,不需要我们修改它的生成器了,这种方法够简单! 一 打开表模型,选择column标签
- 集合 List和Set
分别向Set集合以及List集合中添加“A”,“a”,“c”,“C”,“a”5个元素,观察重复值“a”能否在List集合以及Set集合中成功添加. List<String> ls=new ...
- PostgreSQL Replication之第四章 设置异步复制(7)
4.7 冲突管理 在PostgreSQL中,流复制数据仅在一个方向流动.XLOG由master提供给几个slave,这些slave消耗事务日志并为您提供一个较好的数据备份.您可能想知道这怎么会导致冲突 ...
- orac
#!/bin/bash # Copyright (c) 2013, 2016, Liang Guojun. All rights reserved. # Program: # Check ...
- vue中的三级联动
1.template里面的内容 2.js里面的内容 3.函数怎么写? 这是一个省市区的三级联动,首先你要传递中国的id,这样才能获取到所有的省份,所以在vue的项目中,我需要发一次进页面就请求(来得到 ...
- error:assign attribute must be unsafeunretained
今天在使用协议的过程中.偶然发现这样使用 ? 1 2 3 4 5 6 7 8 9 10 @interface AppDelegate (){ id<chatdelegate> t ...
- iOS 卖票中多线程分析;
注意:(主要一个加锁机制)
- Highcharts图表插件的简单使用说明
Highcharts图表控件是眼下使用最为广泛的图表控件.本文将从零開始逐步为你介绍Highcharts图表控件. 通过本文.你将学会怎样配置Highcharts以及动态生成Highchart图表. ...
- 实战Jquery(四)--标签页效果
这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...
- Android设计模式(十二)--抽象工厂模式
问题: 抽象工厂模式,是一个,狠恶心的模式,那么这个模式在Android有没实用到过呢? 1.定义: 抽象工厂模式:为创建一组相关或者是相互依赖的对象提供一个接口,而不须要指定他们的详细类. 2.使用 ...