标签: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 对象 属性
原文地址:http://blog.csdn.net/bluedream1219/article/details/47153991