您的位置：首页 > Web前端 > JavaScript

05、JS对HTML节点对象的属性操作：

2016-07-03 16:24 573 查看

JS对HTML节点对象的属性操作：

读写 （什么叫读，什么叫写）

ie没有console.log，因此用了后要清楚掉，否则ie下回报错

html标签默认拥有的标签属性可以直接读或写

例如：var oBox = document.getElementById('box');

  oBox.innerHTML = '456';

<a href="http://www.baidu.com" id="baidu" target="_blank">百度</a>

  var oA = document.getElementById('baidu');

  console.log( oA.id );

  console.log( oA.href );

备注：1）标签属性class不能直接写，要使用className,

2）一旦class值或者id值被改变其样式也跟着改变

通过id获取(静态)

<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="utf-8">
<meta name="Author" content="">
<style type='text/css'>
*{ margin:0; padding:0;}

</style>
</head>
<body>

<div id='box' class="wrap">百度</div>

<script type="text/javascript">

var oDiv = document.getElementById('box'); //静态方法
oDiv.id = 'afei';// id被改为afei 此时oDiv依然代表<div id='box' class="wrap">百度</div>（注意此时id为afei）
oDiv.id = 'ooo';//此时依然可以通过oDiv.id修改id
//由于id被改，所以<div id='box' class="wrap">百度</div>样式也被改变（注意此时id为ooo）
</script>
</body>
</html>

通过class获取（动态）

<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="utf-8">
<meta name="Author" content="">
<style type='text/css'>
*{ margin:0; padding:0;}

</style>
</head>
<body>

<div id='box' class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>

<script type="text/javascript">

var oDiv = document.getElementsByClassName('wrap'); // 动态方法

// oDiv 类似于数组 【第一个节点，第二个节点，第三个节点】（此处有3个节点）
console.log( oDiv.length );
oDiv[0].className = 'afei';// oDiv[0]被改为afei  即id=“box"的class改为了afei

// oDiv 类似于数组 【第一个节点，第二个节点】 (由于上面的oDiv[0]被改为afei，所以第二次统计长度的时候只有两个节点了)
console.log( oDiv.length );

</script>
</body>
</html>

标签默认不拥有的自定义属性，不能直接.获取要使用

1）、getAttribute('属性名') //得到自定义属性的属性值

2）、setAttribute('属性名','属性值') //设置(创造/修改)自定义属性

3）、removeAttribute('属性名') //移除属性

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>

<body>

<div id="box" xls='我是小老鼠'></div>  <!--xls为自定义属性-->
<script type="text/javascript">
var oBox = document.getElementById('box');

console.log( oBox.getAttribute( 'xls' ));  //得到自定义属性的属性值
oBox.setAttribute( 'afei' , 'handsome');//设置自定义属性setAttribute( '属性名' , '属性值');
oBox.removeAttribute('xls');//移除属性
</script>
</body>
</html>

节点对象的样式改变：

1.修改内部样式style里面的东西(很少用)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type='text/css' id="css">
*{ margin:0; padding:0;}
</style>
</head>

<body>
<div id='box'></div>
<script>
var oCss = document.getElementById('css');
console.log( oCss.innerHTML );
oCss.innerHTML = oCss.innerHTML + '#box{width:100px;height:100px;background:red;}';
</script>
</body>
</html>

2.修改内联样式style

注意：很少用来（基本不用）读取属性，因为它只能获取行内样式的值

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type='text/css' id="css">
*{ margin:0; padding:0;}
</style>
</head>

<body>
<div id='box' style="width:100px"></div>
<script>
var oDiv = document.getElementById('box');
console.log( oDiv.style.width);
console.log( oDiv.style.height);//很少用来（基本不用） 读取 属性，因为它只能获取行内样式的值

oDiv.style.width =
4000
'100px';
oDiv.style.height = '100px';
oDiv.style.background = 'red';
oDiv.style.marginLeft = '50px';
oDiv.style.padding = '10px';
</script>
</body>
</html>

<例如： obj.style.width = '100px'; obj.style.cssText = 'width:100px;height:100px';>

.style改变的是标签的行内样式

.style也是可读可写，但是一般只用来写，读取时只读取标签的行内属性（怎样读取元素实际属性？后面章节会讲）

注意事项：

1.驼峰；例如：oDiv.style.margin-left= '50px';要写成oDiv.style.marginLeft = '50px';

2.操作属性较多时，使用添加ClassName名来代替；或者有争议的时候直接通过一个classname直接添加属性

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type='text/css' id="css">
*{ margin:0; padding:0;}
.hahaha{
width:100px;
height:100px;
background:red;
margin-left:50px;
padding:10px;
}
</style>
</head>

<body>
<div id='box' style="width:100px"></div>
<script>
var oDiv = document.getElementById('box');
console.log( oDiv.style.width);
console.log( oDiv.style.height);//很少用来（基本不用） 读取 属性，因为它只能获取行内样式的值
/*
oDiv.style.width = '100px';
oDiv.style.height = '100px';
oDiv.style.background = 'red';
oDiv.style.marginLeft = '50px';
oDiv.style.padding = '10px';
*///此种样式不会将其内部原先的样式清除掉，
//样式太复杂的时候可以通过下面的样式一次性写完
//oDiv.style.cssText = 'width:100px;height:100px;background:red;margin-left:50px;padding:10px;';//此种样式会将其内部原先的样式清除掉，
//console.log( oDiv.style.cssText )//获取oDiv的css样式
//以上两种方式都太复杂，可以通过一个classname直接操作
oDiv.className = 'hahaha';//hahaha在前面有声明
</script>
</body>
</html>

3.浮动属性不能直接用（ie浏览器： styleFloat，非ie浏览器：cssFloat）；
4 .获取的路径、颜色不能用来做判断

<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="utf-8">
<meta name="Author" content="">
<style type='text/css'>
*{ margin:0; padding:0;}

</style>
</head>
<body style="background-color:#f00;">

<a href="test.html" id='aa'>123456</a>

<script type="text/javascript">

//获取的路径、颜色不能用来做判断 只能用来赋值；

//var oA = document.getElementById('aa');
//console.log( oA.href )

alert( document.body.style.backgroundColor );
//console.log( document.body.style.backgroundColor )

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航