使用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的宽度,其余无效。
怎么能给所有的匹配(class='dog')元素同时设置宽度为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>
第二种方法,参考https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName中的代码
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)
})
鸿硕目前感觉第二种方法更简洁也更合适一些,至于JS实现的这些功能还是感觉稍显复杂,另外这种JS方法如果动态实现宽度变化需要刷新才可以,打算以后再改进。目前在hsshop商城主题的导航模板中代码暂时注销。
使用纯CSS来解决(直接根据bootstrap的container自适应尺寸来设置不同的固定宽度)能实现动态变化,也更简单一些。目前在hsshop商城主题的导航模板中代码暂时使用。

给TA打赏
共{{data.count}}人
人已打赏
IT百科jqueryjs

jquery条件判断之后,非click或hover触发,直接给元素添加属性

2021-11-20 12:18:28

IT百科

word文档自定义多级标题列表

2022-2-28 20:21:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索