JS获取与设置元素属性方法详解
例子,js获取元素属性。
clientHeight //元素的高度
offsetLeft //元素相对于父元素的left
offsetTop //元素相对于父元素的top
offsetWidth //元素的宽度
offsetHeight //元素的高度
有什么区别:
clientWidth=width+padding
clientHeight=height+padding
offsetWidth=width+padding+border
offsetHeight=width+padding+border
scrollLeft //元素最左端到窗口最左端的距离
scrollTop //元素最顶端到窗口最顶端的距离
scrollWidth //元素的滚动宽度
scrollHeight //元素的滚动高度
//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
二、 设置元素的宽度属性
设置元素的宽度可用 document.getElementById('元素id值').style.width = 数值 + 'px';
同理,可设置高度等其他属性
例如:
<div id="scroller_imglist">
<div id="thelist_imglist">
<div class="imgbox"><a href="#"><img src="images/1.jpg" /></a></div>
<div class="imgbox"><a href="#"><img src="images/1.jpg" /></a></div>
<!-- <div class="imgbox"><a href="#"><img src="images/1.jpg" /></a></div> -->
</div>
</div>
</div>
<!--图片展示操作区-->
<div id="nav_imglist">
<div id="prev_imglist" class="c_grey" onClick="main_pic_scroll.scrollToPage('prev', 0);">〈 上一张</div>
<div class="indicator_num">
<ul id="indicator_imglist">
<li class="active">1</li>
<li>2</li>
<!-- <li>3</li> -->
</ul>
</div>
<div id="next_imglist" onClick="main_pic_scroll.scrollToPage('next', 0);">下一张 〉</div>
</div>
<script type="text/javascript">
var imgList = document.getElementById('thelist_imglist');
var divNode = imgList.getElementsByTagName('img');
var pageNum = divNode.length;//获得<img>元素个数
var textList = document.getElementById('wrapper_imglist');
var textListWidth = textList.offsetWidth;//获得元素宽度
textListWidth = pageNum * textListWidth;
var scroller_imglist = document.getElementById('scroller_imglist');
scroller_imglist.style.width = textListWidth + 'px';//根据页数动态改变宽度
</script>
您可能感兴趣的文章:
JS获取与设置元素属性方法详解
jQuery .attr()和.removeAttr()方法操作元素属性示例
XML DOM – 获取节点值
js获取屏幕高度与宽度
jquery中常用的函数和属性详细解析
Jquery 属性attr()用法教程
重绘与重排如何使用
解密jQuery内核 DOM操作方法(二)html,text,val
HTML5<datalist>标签有哪些属性?HTML5<datalist>标签的具体用法(附实例)
HTML5新增属性:五种全局属性的介绍