使用js获取html元素的宽高以及设置

今天写巨型菜单的侧边栏时，想让侧边栏的菜单项的右侧内容区宽度自适应，也就是根据bootstrap的container属性的变化而随之变化，这里就需要使用JS随时获取某处元素的width或height，JS获取元素宽度和高度的方法如下：

获取html元素宽高的两种方式
// 首先是获取到元素
var main = document.getElementById('main');
// 第一种方式
var mainWidth = main.offsetWidth,
mainHeight = main.offsetHeight;
// 第二种方式
var mainWidth2 = main.style.width,
mainHeight2 = main.style.height;

两种方式的区别是第一种方式可以取到任何情况下的宽高，而第二种方式只能取到html内定义的宽高，而不能取到css定义的宽高。

设置宽高
main.style.width = "120px";
main.style.height = "130px";

有且仅有这种方法，以下方法不可行，火狐测试。
main.style.offsetWidth = "120px";
main.style.offsetHeight = "130px";

获取浏览器的宽高：
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

具体环境中的参考代码：

<script>

    var mao = document.getElementById("hsnav"); // container属性同元素ID

    var w = mao.offsetWidth;    // 返回元素的总宽度

    //console.log(w);

   // alert(w);

    var w2 = w-180-30 + "px";

    console.log(w2);

</script>

以上获取需要元素的宽度，然后修改成自己需要的宽度之后，开始设置宽度应用于需要的元素，如果需设宽的元素是唯一的（直接根据id获取的），这个直接就使用

document.getElementById('gou').style.width = w2;即可。

但是，如果应用于循环结构生成的非唯一元素，比如class均为dog的元素，使用

document.getElementsByClassName('dog'); 可以获取多个元素集合，在JS中如果直接使用document.getElementsByClassName('dog').style.width = w2会报错无法生效；

document.getElementsByClassName('dog')[0].style.width = w2这样可行，但是只是匹配的第一个元素会被设置成w2的宽度，其余无效。

<script>

var dom = document.getElementsByClassName('dog');

//console.log(dom);

var dom1 = document.getElementsByClassName('dog')[0];

var dom2 = document.getElementsByClassName('dog')[1];

var dom3 = document.getElementsByClassName('dog')[2];

var dom4 = document.getElementsByClassName('dog')[3];

dom1.style.width = w2;

dom2.style.width = w2;

dom3.style.width = w2;

dom4.style.width = w2;

</script>

var testElements = document.getElementsByClassName('dog');

var testDivs = Array.prototype.filter.call(testElements, function (testElement) {

    // return testElement.nodeName === 'DIV';

    testElement.style.width = w2; //hs这里也可以直接设为固定尺寸，如520px

    // return testElement;

});

/** hs以上代码就能实现批量给按class匹配的元素设置宽度 */

/** hs以下代码与实现功能无关仅仅做测试使用 */

console.log(testDivs);

// var dom = document.getElementsByClassName('dog'); //hs这个直接使用dom.forEach()无效，下面代码却有效，大概是直接输出含匹配class的html元素。

testDivs.forEach(function (item, index, array) {

    console.log(item, index)

})