zoukankan      html  css  js  c++  java
  • j获取html元素的宽高;设置html元素的宽高

    使用jQuery编写效果就像叫外卖;使用js实现就行自己在家里开火。此处有表情,哭脸。。。。。。。。。。。。

    js获取html元素宽高有两种方法:

    obj.style.width;

    obj.offsetWidth;

    用alert()方法弹出时第一种是获取不到写在样式表里的值也就是(#div{width:200px}),只能获取到写在行内的宽高;使用js为html元素设置宽时使用obj.style.width。例如,obj.style.width = 500+'px';

    第二种方法是可以获取html元素宽高的值,无论写在那里。

    使用obj.offsetWidth;获取到的是容器当前大小,包括边(border)和内填充(padding)的值。

    js本身而言不是写在行内style中的属性都不能通过id.style.atrr来获取。但是为了保证样式、行为、布局分离,严格不要把样式写在行内。所以获取不是行内的style的属性就需要自己编写相应的方法。

    使用getStyle()来处理获取样式表里的属性值。

    function getStyle(obj,attr){

       if(obj.currentStyle){ //ie浏览器

         return obj.currentStyle[attr];

     }else{

    return getComputedStyle(obj,false)[attr]; //火狐浏览器 }

    };

    直接调用这个函数就可以了。

    例如,改变一个id="div"的div宽度大小;

    var odiv = document.getElementById('div');

    odiv .style.width = parseInt(getStyle(odiv,'width'))-1+'px';//改变宽度

    odiv .style.width = parseInt(getStyle(odiv,'fontSize'))+1+'px'; //改变字体的大小

  • 相关阅读:
    html中script标签的使用方法
    css关于浮动的高度塌陷
    canvas用数组方式做出下雨效果
    canvas简易画板。
    html5新标签
    闭包的意义及用法
    字符串的添加方法
    js几种数组遍历方法.
    简易网页打卡页面.
    回忆继承多态
  • 原文地址:https://www.cnblogs.com/wjh0916/p/5760599.html
Copyright © 2011-2022 走看看