分两种情况讨论：
1、使用内联样式，即直接把CSS写在HTML元素的style属性中
[xhtml] view plaincopy
<div id="d1" style="width:100px;height:200px;">
</div>
通过以下js代码可以获取width等属性，
[javascript] view plaincopy
alert(document.getElementById('d1').style.width);//100px
在firefox，ie，opera，safari，chrome上都可以取得到宽度和高度值。
2、使用嵌入、链入或引入样式表（非内联样式），这时候通过element.style.width是获取不到的
[xhtml] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>b.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<mce:style type="text/css"><!--
#d2 {
width:400px;
height:200px;
border:5px solid gray;
padding:5px;
}
--></mce:style><style type="text/css" mce_bogus="1"> #d2 {
width:400px;
height:200px;
border:5px solid gray;
padding:5px;
}
</style>
<mce:script type="text/javascript"><!--
window.onload=function(){
//2、使用嵌入、链入或引入样式表（非内联样式）
//ie：通过currentStyle
alert(document.getElementById('d2').currentStyle.width);//400px ie
//ff,safari,opera,chrome:通过window.getComputedStyle
var el=document.getElementById('d2');
alert(window.getComputedStyle(el,null).style.width);//400px safari,opera,chrome
}
// --></mce:script>
</head>
<body>
<div id="d2"></div>
</body>
</html>
最后封装到一个方法中，
[javascript] view plaincopy
function getRealStyle(el,cssName)
{
var len=arguments.length, sty, f, fv;
'currentStyle' in el ? sty=el.currentStyle : 'getComputedStyle' in window
? sty=window.getComputedStyle(el,null) : null;
if(cssName==="opacity" && document.all){
f = el.filters;
f && f.length>0 && f.alpha ? fv=f.alpha.opacity/100 : fv=1;
return fv;
}
cssName==="float" ? document.all ? cssName='styleFloat' : cssName='cssFloat' : cssName;
sty = (len==2) ? sty[cssName] : sty;
return sty;
}
如果只想获取元素的style对象，则只传第一个参数，第二个参数是获取该对象style属性为styName的值。
转自：
http://blog.csdn.net/zhouruitao/article/details/5867626
分享到：
相关推荐
然而，当我们尝试获取一个CSS样式为display:none的元素的高度和宽度时，会发现常规的JavaScript方法无法直接获取这些尺寸值，因为display:none的元素没有物理尺寸。为了获得这些隐藏元素的尺寸信息，需要采用一些...
在前端开发中，JavaScript Tab标签是一种常见的用户界面元素，它用于组织和展示多部分内容，而自适应宽度的标签导航则是为了确保在不同设备和屏幕尺寸下都能提供良好的用户体验。本篇将深入探讨如何使用JavaScript...
JavaScript监听DOM元素大小变化的知识点主要包括监听DOM元素大小变化的场景、原理和具体实现方法。下面将详细阐述这些内容。 1. 监听DOM元素大小变化的场景 在Web开发中，一个常见的场景是需要监听DOM元素的大小...
以下是使用JS+CSS来实现DIV层自适应高度和宽度的知识点： 一、CSS基础知识 在开始之前，我们需要了解一些基本的CSS知识点。首先，我们需要了解CSS选择器的使用，例如在上面的代码中，我们使用了`*`选择器来将所有...
使用JavaScript（简称JS），开发者可以通过多种方式获取屏幕的高度和宽度，以及页面元素的尺寸信息。 首先，要获取屏幕的宽度和高度，可以使用window对象提供的screen属性。具体来说，可以使用window.screen.width...
【自适应网页宽度的js焦点图左右切换特效】是一种常见的网页设计元素，它通常用于展示一组图片或内容，用户可以通过点击或自动轮换来浏览。在本案例中，这个特效是利用jQuery库实现的，jQuery是一个广泛使用的...
在JavaScript中，获取HTML元素的实际宽度和高度是前端开发中常见的需求。这涉及到对DOM（文档对象模型）的理解以及如何正确地访问和处理CSS样式。本文将深入探讨两种主要的方法，`offsetWidth`和`offsetHeight`，...
然而，在处理更复杂的动态页面时，我们可能会使用如jQuery、React或Vue.js等现代JavaScript框架和库，它们提供了更高级的抽象和工具来简化DOM操作和事件处理。 综上所述，通过理解如何动态操作DOM、监听事件以及...
这里的-6和684是父元素宽度范围的边界值，实际上应该根据父元素的实际宽度动态计算。 为了实现连续拖拽的效果，我们监听了document的mousemove和mouseup事件。当用户在按下鼠标并移动时，mousemove事件会不断触发，...
jQuery作为一款强大的JavaScript库，提供了丰富的功能来增强HTML元素的行为，例如本例中的"jQuery文本框宽度随着输入内容而自动变化"。这个功能使得用户在输入时，文本框的宽度能动态适应输入的文字长度，提供更流畅...
通过四个属性可以获得元素的偏移量： 1、offsetHeight: 元素在垂直方向上占用的空间的大小，（像素）。包括元素的高度，（可见的）水平滚动条的高度，上边框高度和下边框高度。 2、offsetWidth:元素在水平方向上占用...
综上所述，JS中的Canvas API提供的measureText方法为前端开发者提供了一种精确测量文本宽度的方式，适用于需要精细控制文本布局的场景。通过理解并掌握此方法，可以有效提高网页内容显示的准确性和用户体验。更多...
标题中的知识点是使用JavaScript来定义一个浮动元素在浏览器中的位置，特别是当元素需要相对于页面主体宽度浮动时。这种效果通常用于创建固定位置的导航栏、侧边栏或提示信息等，使得这些元素无论用户如何滚动页面，...
如果需要获取不包含边框的元素宽度和高度，可以利用getBoundingClientRect()方法返回的对象的right-left和bottom-top属性值，它们等于元素本身的宽度和高度。 总之，获取元素相对于文档的坐标是Web开发中常用的技术...
函数返回一个对象，其中包含了六个属性，分别是：元素自身的宽度（`width`），元素自身的高度（`height`），元素相对于页面（或父元素）左边界的坐标（`x`或`left`），元素相对于页面（或父元素）上边界的坐标（`y`...
获得表格元素后，就可以直接操作其`border`属性，将其值设置为想要的像素数值，本例中为"10"。 为了提供用户交互能力，HTML中还包含一个按钮`()" value="ChangeBorder">`。这个按钮在被点击时会触发`changeBorder`...
例如，如果每个元素宽度为200px，容器宽度为800px，那么一行可以放4个元素。 4. **元素分配**：将元素逐个添加到对应的列中，直到某列的高度超过其他列，然后创建新的一行。为每个元素设置绝对定位，使其在各自列的...
本文将介绍如何使用JavaScript（JS）判断鼠标移入元素的方向，并提供了完整的示例代码。这一技术实现的关键在于分析鼠标的坐标位置，以及如何将计算结果转换为角度并映射到具体的方向上。 首先，当使用jQuery监听一...
通过动态计算元素的宽度和高度，可以确保页面元素在不同设备上都有良好的展示效果。 flexible.js的设计理念是简洁高效，它避免了复杂的媒体查询和手动计算，大大减轻了开发者的工作负担。然而，需要注意的是，由于...
由于页面在初始化和渲染的过程中，DOM元素可能还未完全渲染完毕，直接获取宽度和高度可能会得到不正确的值。因此，获取元素宽高的正确时机和方式显得尤为重要。 在uni-app中，推荐使用`uni.createSelectorQuery()`...