css备忘录

最新推荐文章于 2026-01-05 11:04:12 发布

转载最新推荐文章于 2026-01-05 11:04:12 发布 · 534 阅读

文章标签：

#css #javascript #工作 #html

前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何使用JavaScript获取网页的尺寸信息，包括可见区域、正文部分及屏幕分辨率等，并展示了如何通过JavaScript直接修改元素的样式属性以实现动态风格变化。

offsetWidth 包含了对象的边线的宽度
width 若你不在HTML里明确指定这个值，那它的返回值会不对。

//在javascript中得到当前窗口的高和宽
<body> <SCRIPT LANGUAGE= "JavaScript ">
var s = " ";
s += "\r\n网页可见区域宽： "+ document.body.clientWidth;
s += "\r\n网页可见区域高： "+ document.body.clientHeight;
s += "\r\n网页可见区域宽： "+ document.body.offsetWidth + " (包括边线和滚动条的宽) ";
s += "\r\n网页可见区域高： "+ document.body.offsetHeight + " (包括边线的宽) ";
s += "\r\n网页正文全文宽： "+ document.body.scrollWidth;
s += "\r\n网页正文全文高： "+ document.body.scrollHeight;
s += "\r\n网页被卷去的高： "+ document.body.scrollTop;
s += "\r\n网页被卷去的左： "+ document.body.scrollLeft;
s += "\r\n网页正文部分上： "+ window.screenTop;
s += "\r\n网页正文部分左： "+ window.screenLeft;
s += "\r\n屏幕分辨率的高： "+ window.screen.height;
s += "\r\n屏幕分辨率的宽： "+ window.screen.width;
s += "\r\n屏幕可用工作区高度： "+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度： "+ window.screen.availWidth;
s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth + " 位彩色 ";
s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI + " 像素/英寸 ";
alert(s);
</SCRIPT>

---------------------------------------------------------------------------------------------------------------------------------------
JavaScript 直接对 style 属性进行修改，来达到动态改变元素风格的目的。
假定元素(id1)的风格表单声明 :
style="font-family:Arial;font-size:12px;"
则您就可以在 JavaScript 中读取和修改风格属性
document.getElementById("id1").style.fontFamily = "Geneva";
document.getElementById("id1").style.fontSize = "14px";
注意:CSS 属性自身是 camelCased 的大小写是驼峰式的，即第一个词的首字小写，随后的每个词首字大写，而不是用连字符“-”进行连接的;如document.getElementById("id1").style.font-family = "Geneva";这样写是错误的。