js怎么取得文本框的宽度与高度

js怎么取得文本框的宽度与高度,第1张

文本框没有宽度属性 所以width是不对。然后style里面有height样式的。但没有width样式。<br>所以你要设置文档框的高度是 设置style="height:30px"就行了<br>文本框的长度 是和size相关的 ,设置size多少 宽度就是多少了<br>取值的话 取对应属性就行了<br>alert(documentgetElementById("text1")size);//宽度 <br>alert(documentgetElementById("text1")styleheight); //高度

IE中: 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

FireFox中: 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

Opera中: 

documentbodyclientWidth ==> 可见区域宽度 

documentbodyclientHeight ==> 可见区域高度 

documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 

documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 

没有定义W3C的标准,则 

IE为: 

documentdocumentElementclientWidth ==> 0 

documentdocumentElementclientHeight ==> 0 

FireFox为: 

documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 

documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 

Opera为: 

documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 

documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 

网页可见区域宽: documentbodyclientWidth 

网页可见区域高: documentbodyclientHeight 

网页可见区域宽: documentbodyoffsetWidth (包括边线的宽) 

网页可见区域高: documentbodyoffsetHeight (包括边线的高) 

网页正文全文宽: documentbodyscrollWidth 

网页正文全文高: documentbodyscrollHeight 

网页被卷去的高: documentbodyscrollTop 

网页被卷去的左: documentbodyscrollLeft 

网页正文部分上: windowscreenTop 

网页正文部分左: windowscreenLeft 

屏幕分辨率的高: windowscreenheight 

屏幕分辨率的宽: windowscreenwidth 

屏幕可用工作区高度: windowscreenavailHeight 

屏幕可用工作区宽度: windowscreenavailWidth 

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 

scrollWidth:获取对象的滚动宽度 

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

eventclientX 相对文档的水平座标 

eventclientY 相对文档的垂直座标 

eventoffsetX 相对容器的水平坐标 

eventoffsetY 相对容器的垂直坐标 

documentdocumentElementscrollTop 垂直方向滚动的值 

eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量

示例:

var winWidth = 0; 

var winHeight = 0; 

function findDimensions() //函数:获取尺寸 

    //获取窗口宽度 

    if (windowinnerWidth) 

        winWidth = windowinnerWidth; 

    else if ((documentbody) && (documentbodyclientWidth)) 

        winWidth = documentbodyclientWidth; 

    //获取窗口高度 

    if (windowinnerHeight) 

        winHeight = windowinnerHeight; 

    else if ((documentbody) && (documentbodyclientHeight)) 

        winHeight = documentbodyclientHeight; 

    //通过深入Document内部对body进行检测,获取窗口大小 

    if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth) 

    { 

        winHeight = documentdocumentElementclientHeight; 

        winWidth = documentdocumentElementclientWidth; 

    } 

    //结果输出至两个文本框 

    documentform1availHeightvalue= winHeight; 

    documentform1availWidthvalue= winWidth; 

findDimensions(); 

//调用函数,获取数值 

windowonresize=findDimensions;

Javascript:

网页可见区域宽 document body clientWidth

网页可见区域高 document body clientHeight

网页可见区域宽 document body offsetWidth (包括边线的宽)

网页可见区域高 document body offsetHeight (包括边线的高)

网页正文全文宽 document body scrollWidth

网页正文全文高 document body scrollHeight

网页被卷去的高 document body scrollTop

网页被卷去的左 document body scrollLeft

网页正文部分上 window screenTop

网页正文部分左 window screenLeft

屏幕分辨率的高 window screen height

屏幕分辨率的宽 window screen width

屏幕可用工作区高度 window screen availHeight

屏幕可用工作区宽度 window screen availWidth

JQuery:

$(document) ready(function(){

alert($(window) height()); //浏览器当前窗口可视区域高度

alert($(document) height()); //浏览器当前窗口文档的高度

alert($(document body) height());//浏览器当前窗口文档body的高度

alert($(document body) outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window) width()); //浏览器当前窗口可视区域宽度

alert($(document) width());//浏览器当前窗口文档对象宽度

alert($(document body) width());//浏览器当前窗口文档body的宽度

alert($(document body) outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

lishixinzhi/Article/program/Java/JSP/201311/20160

用 JavaScript 准确获取手机屏幕的宽度和高度

documentdocumentElementclientWidth; documentdocumentElementclientHeight;

这个得到的是设备像素可见宽高,比如iPhone 4s在微信内设置了viewport为1的时候为320416(手机480 - 微信状态栏64), iPhone 5里为320504

小部分手机获取到的宽高并不正确。比如上面说的screenwidth screenheight这些数据在有的手机上并不准确

(1)domstylewidth/height 获取dom元素内联样式中设定的width,height

(2)domcurrentStylewidth/height 获取dom元素渲染后的width,height,只支持IE

(3)windowgetComputedStyle(dom)width/height 浏览器渲染后的元素宽,兼容性更好

(4)domgetBoundingClientRect()width/height/left/top/right/ 计算一个元素的绝对位置(相对于视窗左上角),它能拿到元素的left、top、right、bottom、width、height

ElementgetBoundingClientRect() - Web API 接口参考 | MDN

以上就是关于js怎么取得文本框的宽度与高度全部的内容,包括:js怎么取得文本框的宽度与高度、如何用JS动态获取浏览器的宽高、JS和jquery获取各种屏幕的宽度和高度等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9527100.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存