js中关于获取元素属性的方法（object.style.width）

改成w=woffsetWidth;

js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度，而通过#div1offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。

小结，因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。

现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1stylewidth对 应#div1offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。

最常见的判断方法：typeof

alert(typeof a) ------------> string

alert(typeof b) ------------> number

alert(typeof c) ------------> object

alert(typeof d) ------------> object

alert(typeof e) ------------> function

alert(typeof f) ------------> function

其中typeof返回的类型都是字符串形式，需注意，例如：

alert(typeof a == "string") -------------> true

alert(typeof a == String) ---------------> false

另外typeof 可以判断function的类型；在判断除Object类型的对象时比较方便。

判断已知对象类型的方法： instanceof

alert(c instanceof Array) ---------------> true

alert(d instanceof Date)

alert(f instanceof Function) ------------> true

alert(f instanceof function) ------------> false

注意：instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

根据对象的constructor判断： constructor

alert(cconstructor === Array) ----------> true

alert(dconstructor === Date) -----------> true

alert(econstructor === Function) -------> true

注意： constructor 在类继承时会出错

eg,

function A(){};

function B(){};

Aprototype = new B(); //A继承自B

var aObj = new A();

alert(aobjconstructor === B) -----------> true;

alert(aobjconstructor === A) -----------> false;

而instanceof方法不会出现该问题，对象直接继承和间接继承的都会报true：

alert(aobj instanceof B) ----------------> true;

alert(aobj instanceof B) ----------------> true;

言归正传，解决construtor的问题通常是让对象的constructor手动指向自己：

aobjconstructor = A; //将自己的类赋值给对象的constructor属性

alert(aobjconstructor === A) -----------> true;

alert(aobjconstructor === B) -----------> false; //基类不会报true了;

通用但很繁琐的方法： prototype

alert(ObjectprototypetoStringcall(a) === ‘[object String]’) -------> true;

alert(ObjectprototypetoStringcall(b) === ‘[object Number]’) -------> true;

alert(ObjectprototypetoStringcall(c) === ‘[object Array]’) -------> true;

alert(ObjectprototypetoStringcall(d) === ‘[object Date]’) -------> true;

alert(ObjectprototypetoStringcall(e) === ‘[object Function]’) -------> true;

alert(ObjectprototypetoStringcall(f) === ‘[object Function]’) -------> true;

JavaScript中定义类的各种方法。

1．工厂方式

javaScript中创建自己的类和对象，我们应该是必须掌握的，我们都知道javaScript中对象的属性可以在对象创建后动态定义，比如下面的代码：

复制代码

代码如下:

<script type="text/javascript">

//定义

var oCar = new Object();

oCarcolor = "red";

oCardoors =

4;

oCarshowColor = function() {

alert(thiscolor);

}

//调用

oCarshowColor();

</script>

我们很容易使用oCar对象，但是我们创就是想创建多个Car实例。我们可以使用一个函数来封装上面的代码来实现：<script

type="text/javascript">

复制代码

代码如下:

//定义

function createCar() {

var

oCar = new Object();

oCarcolor = "red";

oCardoors = 4;

oCarshowColor = function() {

alert(thiscolor);

}

return oCar;

}

//调用

var ocar1 = createCar();

var ocar2 = createCar();

ocar1color = "black";

ocar1showColor();

ocar2showColor();

</script>

顺便说一下，javaScript对象默认成员属性都是public

的。这种方式我们称为工厂方式，我们创造了能创建并返回特定类型的对象的工厂。

这样做有点意思了，但是在面向对象中我们经常使用创建对象的方法是：

Car car=new Car();

使用new

关键字已经深入人心，因此我们使用上面的方法去定义总感觉别扭，并且每次调用时都去创建新的属性以及函数，功能上也不实际。下来我们看看构造函数的形式定义类。

2．构造函数

这种方式看起来有点象工厂函数。具体表现如下：

复制代码

代码如下:

<script type="text/javascript">

//定义

function Car(color, doors) {

thiscolor = color;

thisdoors

= doors;

thisshowColor = function() {

alert(thiscolor);

};

}

//调用

var car1 = new Car("red", 4);

var car2 = new Car("blue", 4);

car1showColor();

car2showColor();

</script>

看起来效果很明显，有差别了吧。感觉有点意思了。在构造函数内部创造对象使用this 关键字，使用new

运算符创建对象感觉非常亲切。但是也有点问题：每次new

对象时都会创建所有的属性，包括函数的创建，也就是说多个对象完全独立，我们定义类的目的就是为了共享方法以及数据，但是car1对象与car2对象都是各自独立的属性与函数，最起码我们应该共享方法。这就是原形方式的优势所在。

3．原型方式

利用对象的prototype属性，可把它看出创建新对象所依赖的原型。方法如下：

复制代码

代码如下:

<script type="text/javascript">

//定义

function Car() {

};

Carprototypecolor = "red";

Carprototypedoors = 4;

Carprototypedrivers = new Array("Tom",

"Jerry");

CarprototypeshowColor = function() {

alert(thiscolor);

}

//调用：

var car1 = new Car();

var car2 = new Car();

car1showColor();

car2showColor();

alert(car1drivers);

car1driverspush("stephen");

alert(car1drivers);

//结果：Tom,Jerry,stephen

alert(car2drivers); //结果：Tom,Jerry,stephen

//可以用json方式简化prototype的定义:

Carprototype =

{

color: "red",

doors: 4,

drivers: ["Tom", "Jerry",'safdad'],

showColor: function()

{

alert(thiscolor);

}

}</script>

首先这段代码的构造函数，其中没有任何代码，接下来通过对象的prototype属性添加属性定义Car对象的属性。这种方法很好，但是问题是Car的对象指向的是Array指针，Car的两个对象都指向同一个Array数组，其中一个对象car1改变属性对象的引用（数组Array）时，另一个对象car2也同时改变，这是不允许的。

同时该问题也表现在原型不能带任何初始化参数，导致构造函数无法正常初始化。这需要另一种方式来解决：那就是混合的构造函数/原型模式。

4 混合的构造函数/原型模式

联合使用构造函数和原型方式，定义类就非常方便。

复制代码

代码如下:

<script type="text/javascript">

//定义

function Car(color,doors)

{

thiscolor=color;

thisdoors=doors;

thisdrivers=new Array("Tom","Jerry");

}

CarprototypeshowColor=function(){

alert(thiscolor);

}

//调用：

var car1=new Car('red',4);

var car2=new Car('blue',4);

car1showColor();

car2showColor();

alert(car1drivers);

car1driverspush("stephen");

alert(car1drivers);

//结果：Tom,Jerry,stephen

alert(car2drivers); //结果：Tom,Jerry

alert(car1

instanceof Car);

</script>

该方法是把属性放在内部定义，把方法放在外边利用prototype进行定义。解决了第三种方法的问题。

这种方法其实应该来说非常友好了，但是比起java的语法来，应该有一些不和谐，感觉比较凌乱，对C++来说，我们就没有那么麻烦的感觉了，可是开发C++的研发人员一般情况下很少涉及javaScript，而对J2EE的研发人员来说，这种方式总有一些别扭。总感觉不是友好的封装，其实只不过是视觉上封装效果不是很好而已，要想达到视觉封装效果而又能达到这种方法的效果的也可以以，个人认为其实比较麻烦。那就是动态原型法。

5动态原型

对于习惯使用其他语言的开发者来说，使用混合的构造函数/原型方式感觉不那么和谐。毕竟，定义类时，大多数面向对象语言都对属性和方法进行了视觉上的封装。考虑下面的C#类：

复制代码

代码如下:

class Car //class

{

public string

color = "red";

public int doors = 4;

public int mpg = 23;

public

Car(string color, int doors, int mpg) //constructor

{

thiscolor =

color;

thisdoors = doors;

thismpg = mpg;

}

public void

showColor() //method

{

ConsoleWriteLine(thiscolor);

}

}

C#很好的打包了Car类的所有属性和方法，因此看见这段代码就知道它要实现什么功能，它定义了一个对象的信息。批评混合的构造函数/原型方式的人认为，在构造函数内存找属性，在其外部找方法的做法不合逻辑。因此，他们设计了动态原型方法，以提供更友好的编码风格。

动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是用动态原型方法重写的Car类：

复制代码

代码如下:

<script type="text/javascript">

//定义

function Car() {

thiscolor = "red";

thisdoors = 4;

thisdrivers = new Array("Tom", "Jerry");

if (typeof Car_initialized ==

"undefined") {

CarprototypeshowColor = function() {

alert(thiscolor);

}

//

}

//最后定义

Car_initialized = true;

}

</script>

直到检查typeof

Car_initialized是否等于"undefined"之前，这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义，构造函数将用原型方式继续定义对象的方法，然后把Car_initialized设置为true。如果这个值定义了（它的值为true时，typeof的值为Boolean），那么就不再创建该方法。简而言之，该方法使用标志（_initialized）来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次，为取悦传统的OOP开发者，这段代码看起来更像其他语言中的类定义了。

6 混合工厂方式

这种方式通常是在不能应用前一种方式时的变通方法。它的目的是创建假构造函数，只返回另一种对象的新实例。这段代码看来与工厂函数非常相似：

复制代码

代码如下:

function Car() {

var oTempCar = new

Object();

oTempCarcolor="red";

oTempCardoors=4;

oTempCarmpg=23;

oTempCarshowColor = function() {

alert(thiscolor);

}

return

oTempCar;

}

与经典方式不同，这种方式使用new运算符，使它看起来像真正的构造函数：

var oCar =

new Car();

由于在Car()构造函数内部调用了new运算符，所以将忽略第二个new运算符（位于构造函数之外）。在构造函数内部创建的对象被传递回变量var。这种方式在对象方法的内部管理方面与经典方式有着相同的问题。强烈建议：除非万不得已（请参阅第15章），还是避免使用这种方式。

总结：（采用哪种方式)

目前使用最广泛的是混合的构造函数/原型方式。此外，动态原型方法也很流行，在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式，因为这样会给代码引入问题。

复制代码

代码如下:

//ps

//static class (1:function)

var CarCollection = new function() {

var _carCollection = new Array();

//global,private

thisAdd = function(objCar) {

alert('Add');

}

thisGet = function(carid) {

alert('Get');

}

}

//static

class (2:json)

var Car = {

color: 'red',

doors: 4,

showColor: function() { alert(thiscolor); }

}

CarshowColor();

object代表“元素、控件”

json返回的这个元素，无法显示。所以帮不到你什么。

你需要自己知道每一个object代表的是什么元素或是控件。

它应该怎么样去调用。

比如：

在JS中有这样一句话

alert(documentgetElementById("a"))

在body中有

<p id="a">这是中文</p>

你在执行的时候，d出的消息就是[object HTMLParagraphElement]

当你写成

alert(documentgetElementById("a")innerText)时

d出的消息就是“这是中文”

调用的控件或元素不同，它存在的属性，也不相同。所以需要你自己去找了。

基本数据类型（按值访问）：Undefined 、 Null 、 Boolean 、 Number 和 String

引用数据类型（按引用访问）：object、Array、function

typeof（检测基本数据类型时 typeof 是非常得力的助手）可以返回以下6种类型：undefined  、 boolean 、 number 、string、object（对象和null都是object类型）、function

instanceof（用于检测引用类型）：所有引用类型的值都是 Object 的实例，person（引用类型值） instanceof Object永远都是true。

要知道是什么类型的对象，使用instanceof *** 作符接上想要判断的类型，例如colors instanceof Array。

基本数据类型复制：复制的是该变量的副本，这两个变量可以参与任何 *** 作而不会相互影响

引用数据类型复制：复制的是该变量的指针，该指针指向存储在堆中的一个对象。复制 *** 作结束后，两个变量实际上将引用同一个对象。因此，改变其中一个变量，就会影响另一 个变量

传参：基本类型和引用类型全部是按值传递，相当于把参数复制一份给到function的局部变量

为了便于 *** 作基本类型值，ECMAScript 还提供了 3 个特殊的引用类型： Boolean 、 Number 和

String 。

Number 类型重写了 valueOf() 、 toLocaleString() 和 toString()方法。除了继承的方法之外， Number 类型还提供了一些用于将数值格式化为字符串的方法。 toFixed() 方法会按照指定的小数位返回数值的字符串表示。

String 对象的方法也可以在所有基本的字符串值中访问到。其中，继承的 valueOf() 、 toLocale-String() 和 toString() 方法，都返回对象所表示的基本字符串值。String 类型的每个实例都有一个 length 属性。

字符方法：两个用于访问字符串中特定字符的方法是： charAt() 和 charCodeAt() 。

var stringValue = "hello world";

alert(stringValuecharAt(1)); //"e"

alert(stringValuecharCodeAt(1)); // 输出"101"，小写字母 "e" 的字符编码

字符串 *** 作方法

1、concat:拼接字符串，可接收任意多字符串，不改变原字符串值，虽然 concat() 是专门用来拼接字符串的方法，但实践中使用更多的还是加号 *** 作符（+）。

var stringValue = "hello ";

var result = stringValueconcat("world", "!");

alert(result); //"hello world!"

alert(stringValue); //"hello"

2、三个基于子字符串创建新字符串的方法： slice() 、 substr() 和 substring() 。都接收1或2个参数。

slice() 、substring()在接收正数参数时，第一个参数是字符串截取的起始位置，第二个是字符串结束位置。

substr()在接收正数参数时，第一个参数同上，第二个参数是截取长度。

当第一个参数为负数的时候，slice()和substr()按照参数+字符串长度结果来截取；substring()将负参数转换为0；

当第二个参数为负数的时候，slice()按照参数+字符串长度结果来截取；substr()和substring()将负参数转换为0；

3、字符串位置方法：有两个可以从字符串中查找子字符串的方法： indexOf() 和 lastIndexOf()

4、trim()：删除字符串前后空格，不改变原字符串值

5、字符串大小写转换方法

字符串大小写转换的方法有 4 个： toLowerCase() 、 toLocaleLowerCase() 、 toUpperCase() 和toLocaleUpperCase() 。

6、字符串的模式匹配方法

match() 方法只接受一个参数，要么是一个正则表达式，要么是一个 RegExp 对象。返回数组。

search()参数同上。返回要查找的在字符串中第一次出现的位置。

字符串替换：var result = textreplace("at", "ond");

7、localeCompare() 方法

var stringValue = "yellow";

alert(stringValuelocaleCompare("brick")); //1

在前面返回1，同样位置返回0，在后面返回-1

instanceof检测实例是否有继承某类。consolelog(new Array() instanceof Array);consolelog([] instanceof Array);而 typeof 检测出来不精准很多，js里的对象都是object。（%#@￥#……%￥@&@￥%&￥……）再摘一段犀牛书中的描述：5102 typeof 运算符如果 typeof 的运算数是数字、字符串或者布尔值，它返回的结果就是 “number”、“string”或“boolean”。对对象、数组和null，它返回的是“object”。对函数运算数，它返回的是“function”。

以上就是关于js中关于获取元素属性的方法（object.style.width）全部的内容，包括:js中关于获取元素属性的方法（object.style.width）、如何判断js中的数据类型、js 如何向函数传递object类型等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！