element.offsetWidth 与 element.style.width的区别

2024-06-08 19:08

本文主要是介绍element.offsetWidth 与 element.style.width的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

请先 下载demo事例

下载后,请依次点击div,仔细观看弹出框里面的内容,仔细比较一下,你就能看到区别。

不愿意下载的童鞋也可以自己复制啊!微笑

html:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Hello, World</title>	<link rel="stylesheet" href="static/css/aio.css" />
</head><body><div class="div1 box" id="div1" style="width:200px">我是div1<br/>点我看看我的类型</div>  <div class="div2 box" id="div2">我是div2<br/>点我看看我的类型</div> <hr/><div class="div3 box" id="div3" style="width:200px">我是div3<br/>我有padding border width</div>  <div class="div4 box" id="div4">我是div4<br/>我有padding border width </div> <hr/><div class="div5 box" id="div5" style="width:200px">我是div5<br/>你可以改变我的宽度</div>  <div class="div6 box" id="div6">我是div6<br/>但你改变不了我的宽度!嘻嘻</div> <hr/><div class="div7 box" id="div7" style="width:200px">我是div7<br/>我的样式在行间</div>  <div class="div8 box" id="div8">我是div8<br/>我的样式在css里面</div> <script src="static/js/test.js"></script>
</body>
</html>
css:

/*!/css/style.scss*/
body {background-color: #FFCCFF;
}.box {margin: 20px;height: 200px;display: inline-block;background-color: blue;vertical-align: top;
}.div2 {width: 200px;
}.div3 {padding: 5px;border: 5px solid red;
}.div4 {padding: 5px;width: 200px;border: 5px solid red;
}.div6 {width: 200px;
}.div8 {width: 200px;
}
js:

window.οnlοad=function() {var odiv1 = document.getElementById('div1');var odiv2 = document.getElementById('div2');var odiv3 = document.getElementById('div3');var odiv4 = document.getElementById('div4');var odiv5 = document.getElementById('div5');var odiv6 = document.getElementById('div6');var odiv7 = document.getElementById('div7');var odiv8 = document.getElementById('div8');odiv1.onclick =function(){var width = odiv1.style.width;alert("div1宽度:"+width+"\n"+"div1类型为:"+typeof(width));console.log("div1宽度:"+width+"\n"+"div1类型为:"+typeof(width));}odiv2.onclick =function(){var width = odiv2.offsetWidth;alert("div2宽度:"+width+"\n"+"div2类型为:"+typeof(width));console.log("div2宽度:"+width+"\n"+"div2类型为:"+typeof(width));}odiv3.onclick =function(){var width = odiv3.style.width;alert("div3宽度:"+width);console.log("div3宽度:"+width);}odiv4.onclick =function(){var width = odiv4.offsetWidth;alert("div4宽度:"+width);console.log("div4宽度:"+width);}odiv5.onclick =function(){odiv5.style.width = 300+'px';}odiv6.onclick =function(){odiv6.offsetWidth = 300;}odiv7.onclick =function(){var width = odiv7.style.width;alert("div4宽度:"+width);console.log("div4宽度:"+width);}odiv8.onclick =function(){var width = odiv8.style.width;alert("div4宽度:"+width);console.log("div4宽度:"+width);}}


两者区别表
区别style.widthoffsetWidth
类型区别stringnumber
宽度区别本身的div的widthpadding+border+width
读写属性可读可写只读

最后一点。style.width只能获取到div的行间宽度。要想获取到css里面的宽度的话。就要用到getComputerStyle( element, op ).width 

IE下用element.currentStyle.width。


这篇关于element.offsetWidth 与 element.style.width的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1043049

相关文章

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

分辨率三兄弟LPI、DPI 和 PPI有什么区别? 搞清分辨率的那些事儿

《分辨率三兄弟LPI、DPI和PPI有什么区别?搞清分辨率的那些事儿》分辨率这个东西,真的是让人又爱又恨,为了搞清楚它,我可是翻阅了不少资料,最后发现“小7的背包”的解释最让我茅塞顿开,于是,我... 在谈到分辨率时,我们经常会遇到三个相似的缩写:PPI、DPI 和 LPI。虽然它们看起来差不多,但实际应用

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab

Nginx指令add_header和proxy_set_header的区别及说明

《Nginx指令add_header和proxy_set_header的区别及说明》:本文主要介绍Nginx指令add_header和proxy_set_header的区别及说明,具有很好的参考价... 目录Nginx指令add_header和proxy_set_header区别如何理解反向代理?proxy

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

Spring中@RestController和@Controller的使用及区别

《Spring中@RestController和@Controller的使用及区别》:本文主要介绍Spring中@RestController和@Controller的使用及区别,具有很好的参考价... 目录Spring中@RestController和@Controller使用及区别1. 基本定义2. 使

Qt 中 isHidden 和 isVisible 的区别与使用小结

《Qt中isHidden和isVisible的区别与使用小结》Qt中的isHidden()和isVisible()方法都用于查询组件显示或隐藏状态,然而,它们有很大的区别,了解它们对于正确操... 目录1. 基础概念2. 区别清见3. 实际案例4. 注意事项5. 总结1. 基础概念Qt 中的 isHidd

Spring、Spring Boot、Spring Cloud 的区别与联系分析

《Spring、SpringBoot、SpringCloud的区别与联系分析》Spring、SpringBoot和SpringCloud是Java开发中常用的框架,分别针对企业级应用开发、快速开... 目录1. Spring 框架2. Spring Boot3. Spring Cloud总结1. Sprin

Java中的runnable 和 callable 区别解析

《Java中的runnable和callable区别解析》Runnable接口用于定义不需要返回结果的任务,而Callable接口可以返回结果并抛出异常,通常与Future结合使用,Runnab... 目录1. Runnable接口1.1 Runnable的定义1.2 Runnable的特点1.3 使用Ru