Javascript如何获得borderWidth的数值

JavaScript中获得css样式的值的方法：

<div style="border:solid 1px #000;border-width:10px;" id="test"></div>

1元素的style（仅限于直接在元素上写style）

documentgetElementById('test')styleborderWidth

2currentStyle（IE，这个可以获取不在元素的style中的样式）

documentgetElementById('test')currentStyle

3getComputedStyle（低版本IE不支持，可获取伪类的样式）

getComputedStyle(documentgetElementById('test'),null)borderWidth;

documentgetElementById("id")style只能修改页面上的css属性 不能修改css文件中的属性

js不能直接修改样式表，不过可以通过添加或者删除类达到控制样式的效果

常用div宽度获取 domoffsetWidth:只读属性,返回元素的布局宽度数值(int)(content + padding + border),此数值为四舍五入后的整数 domgetBoundingClientRect()width:只读属性,返回元素的布局宽度数值(int)(content + padding + border),此数值不会四舍五入 windowgetComputedStyle(dom)width:只读属性,返回元素内容宽度的数值和单位(string)(content) domscrollWidth:只读属性,返回全部content+ padding 的宽度数值(int) domclientWidth:只读属性,返回元素内容可视区域的宽度(content + padding)

在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽度，outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。同理，innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。

所以说：对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);

再给你一个实例，前提是正确导入jQuery，即可运行。

代码中将p元素的宽度设计为200px；运行会输出200、220、240、260。

<script type="text/javascript">

$(document)ready(function(){

$("btn1")click(function(){

var obj=$("#p_obj");

alert(objwidth());

alert(objinnerWidth());

alert(objouterWidth());

alert(objouterWidth(true));

});

});

</script>

<p id="p_obj" style="background-color:yellow; width:200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph</p>

<button class="btn1">输出高度</button>

并没有getElementByClassName()这个函数，只有getElementsByClassName()，Element后面有个s，这个返回来是多个节点的集合（因为class名有可能匹配到多个），假设只有1个元素用这个class名，那么要改变宽度可以：

var a=documentgetElementsByClassName("a");

a[0]stylewidth="500px";

望采纳，谢谢

以上就是关于Javascript如何获得borderWidth的数值全部的内容，包括:Javascript如何获得borderWidth的数值、document.getElementById(id).style.width获取元素的CSS的问题。、cssdiv如何获取父级元素div的宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！