分两种情况讨论：
1、使用内联样式，即直接把CSS写在HTML元素的style属性中
<div id="d1" style="width:100px;height:200px;">
</div>
通过以下js代码可以获取width等属性，
alert(document.getElementById('d1').style.width);//100px
在firefox，ie，opera，safari，chrome上都可以取得到宽度和高度值。
2、使用嵌入、链入或引入样式表（非内联样式），这时候通过element.style.width是获取不到的。
<!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">
<style type="text/css">
#d2 {
width:400px;
height:200px;
border:5px solid gray;
padding:5px;
}
</style>
<script>
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
}
</script>
</head>
<body>
<div id="d2"></div>
</body>
</html>
最后封装到一个方法中，
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的值。
分享到：
相关推荐
### 知识点详解 ...综上所述，该简洁的JS图片交替切换代码通过简单的HTML、CSS和JavaScript实现了基本的图片轮播功能，适用于各种简单的网页项目。通过进一步优化和完善，可以提升其功能性和用户体验。
- **DOM操作**：使用JavaScript获取DOM元素，并通过修改`style.left`属性值来改变图片的位置。 - **事件监听**：通过`onclick`事件监听左右按钮的点击，控制图片滚动的方向。 - **定时器**：使用`setInterval`函数...
3. **DOM操作**：收到服务器返回的新数据后，JavaScript需要将这些数据动态添加到页面的DOM（Document Object Model）树中，创建或更新相应的HTML元素，以实现动态加载效果。 4. **响应式设计**：为了适应不同设备...
JavaScript（简称JS）是一种广泛应用于网页和服务器端开发的编程语言。它是一种轻量级、解释型、基于原型的语言，具有强大的动态性和灵活性。下面将详细介绍JS基础知识以及面试中常见的考点。 标题所提到的“原型”...
【Web前端开发】Web前端开发是构建互联网应用用户界面的核心技术，主要涉及HTML、CSS和JavaScript这三大基石。HTML（HyperText Markup Language）是用于创建网页内容的基础标记语言，它描述了网页的结构和信息。 1....
2. **CSS（Cascading Style Sheets）**：CSS用于美化HTML元素，让网页具有视觉吸引力。在“图片时间编辑”项目中，CSS可能用于设定图片和时间显示区域的样式，如位置、大小、颜色、背景等。此外，CSS动画可能也被...
- `tab2`: 获取id为“demo2”的元素，并将其innerHTML设置为`tab1`的innerHTML。 #### 2. 功能函数 - `Marquee()`: 主要滚动逻辑函数，用于控制图片的滚动行为。 - 如果`tab2`的宽度减去`tab`的水平滚动位置小于...
### JavaScript 实现加载进度条知识点解析 #### 一、引言 在Web开发中，加载进度条是一个非常实用的功能，能够提升用户体验，特别是在资源较大或网络条件不佳的情况下。本文将详细解析如何使用原生JavaScript（即不...
2. `.animate()`：自定义动画，可以改变CSS的任意可动画属性，如`$("#element").animate({width: "500px"}, 1000)`，将在1秒内将元素宽度平滑地调整到500像素。 3. **队列与速度控制**：`.delay()`, `.queue()`, `....
4. DOM（Document Object Model）：在JavaScript中，DOM是HTML文档的结构化表示，用于动态地操作页面元素。在五子棋游戏中，通过DOM操作，可以获取用户点击的位置，更新棋盘的状态，并将这些变化反映到界面上。 5. ...
例如，这里定义了一个名为 `cdiv` 的类，设置了元素的高度、宽度、边框样式等属性。这使得被拖动的元素更加醒目，便于用户操作。 ```css .cdiv { height: 250px; width: 250px; border-style: solid; border-...
2. **DOM操作**：JavaScript-30会教你如何使用原生的DOM API来操作HTML元素，如选择元素、添加和删除元素、修改元素内容以及事件监听等，这些都是Web开发中的必备技能。 3. **动画与交互**：挑战中的多个项目涉及...
1. **获取滚动对象**：使用`document.getElementById("mq")`获取指定ID的`div`元素。 2. **设置参数**：定义了单行高度、实际行数、每次滚动高度等变量。 3. **滚动函数**：`run()`函数实现了核心的滚动逻辑，包括...
在"HTML-google-clone-main"这个文件夹中，开发者通常会找到HTML文件（如`index.html`）以及可能的CSS（`styles.css`）和JavaScript（`script.js`）文件。CSS用于美化和布局，JavaScript则用于增加动态功能，例如...
3. **JavaScript事件处理与DOM操作**：使用`document.getElementById()`获取页面元素，通过`innerHTML`和`className`属性动态修改元素的内容和样式，实现即时反馈。 #### 代码解析： - **HTML结构**：页面主要由一...
1. **选择器**: jQuery的选择器类似于CSS选择器，用于选取页面中的HTML元素。例如，`$("#id")`选择ID为"id"的元素，`$(".class")`选择所有类名为"class"的元素，`$("tag")`则选择所有指定标签名的元素。 2. **DOM...
根据提供的文件信息，我们可以了解到这是一份关于使用JavaScript（JS）创建拼图游戏的代码文档。该文档强调游戏的实现是“面向对象”的，并且“注释完整”，这表明作者在编写代码时遵循了面向对象的原则，并且为了...
- **`demo.getElementsByTagName('img')`**：获取`demo`容器内所有的`<img>`元素。 - **`document.getElementById('enlarge_images')`**：获取ID为`enlarge_images`的DOM元素。 ##### 2. 图片点击事件处理 ```...
这段代码的核心知识点在于如何操作DOM，包括创建和插入HTML元素，获取元素的内容，以及为元素添加事件监听器。这些操作都是前端开发中最基本且最常见的任务，无论是在处理表单输入、页面布局还是在动态更新内容时，...