怎样用js设置元素宽度?

怎样用js设置元素宽度?,第1张

变量没什么问题的,你看看,这个s有没有值,是不是加载js时,还没到body那儿,也就计算不出客户端的宽度。以下是具体实现代码:

具体公式是:

var  s = document.body.clientWidth

document.getElementById("body1").innerHTML=s

document.getElementById("body1").style.width="200px"

这个问题我自然想到过,所有时时都把S 是值显示出来了,S是有效的数字型的变量。

1、js中获取当前屏幕宽度方法如下:

网页可见区域宽: 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

2、js简介

js,是JavaScript的缩写,是一种直译式脚本语言,一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

avaScript是的源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。直译语言的弱点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语言也无法运行。

编写相应程序代码即可。

代码如下:

<script>

function getInfo()

{

var s = ""

s += " 网页可见区域宽:"+ document.body.clientWidth

s += " 网页可见区域高:"+ document.body.clientHeight

s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"

s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)"

s += " 网页正文全文宽:"+ document.body.scrollWidth

s += " 网页正文全文高:"+ document.body.scrollHeight

s += " 网页被卷去的高(ff):"+ document.body.scrollTop

s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop

s += " 网页被卷去的左:"+ document.body.scrollLeft

s += " 网页正文部分上:"+ window.screenTop

s += " 网页正文部分左:"+ window.screenLeft

s += " 屏幕分辨率的高:"+ window.screen.height s += " 屏幕分辨率的宽:"+ window.screen.width

s += " 屏幕可用工作区高度:"+ window.screen.availHeight

s += " 屏幕可用工作区宽度:"+ window.screen.availWidth

s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"

s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"

//alert (s)

}

getInfo()

</script>


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

原文地址: http://outofmemory.cn/tougao/7779928.html

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

发表评论

登录后才能评论

评论列表(0条)

保存