Lixh1986
- 浏览: 1113163 次
-
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言，WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986：
Java并发编程：自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986：
http://win.51apps.com.cn/https: ...
temp -
ztwsl：
不错，支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai：
谢谢您能将知识精华汇编总结，让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23：
谢谢了，顶顶
struts2中的ValueStack学习
Get DIV width and height in javascript
=========================================
http://www.iteye.com/problems/50940
首先，你的代码中没有申明DTD，所以，在IE下，id=div1的div表现为height就是最小高，类似于min-height(IE6不识别该属性)，所以，它的高将随内容而走。默认的，浏览器里的字大小为16px，所以，你的div在IE下的高度就是16px，即使你设置了height，这个div的高度，仍然会随你的内容而变化。但是，如果你去FireFox下打开的话，那么，你设置的这个div的高度将是起作用的。因为，FireFox是遵守W3C标准的。具体的内容可以通过给div给border来查看。
举例：
<div style="height:6px;border:1px solid #000;">ABC</div>
将这个内容放置在一个单独的html中，分别用IE和FireFox打开看一下就可以知道差别了。
想让他们保持一致的话，请给页面的第一行加上一下内容：
<!DOCTYPE html>
然后在对比IE和FF
其次，div是一个无样式属性的标签，你对div设置的width，height都是错误的，这些属性只有写在style里或者css中才有效。
============================================
It's quite wrong to use ele.style.width to get the element's width!!!!!!
In native JavaScript,you can get a element's CSS through two ways:
Standard Method
window.getComputedStyle(ele)
For example,
var ele = document.getElementById("#content"),
eleStyle = window.getComputedStyle(ele);
/* Below is the width of ele */
var eleWidth = eleStyle.width;
IE(IE 8 And Before)
element.currentStyle
For example,
var ele = document.getElementById("#content"),
eleStyle = ele.currentStyle;
/* Below is the width of ele */
var eleWidth = eleStyle.width;
Why Not Use ele.style?
ele.style is just get the attribule style of ele.If you use ele.style.width,you can just get the width of ele.style,not the real width of ele.
If you have done something like
ele.style.width = "55px"
,you can get "55px" when using ele.style.widht.If you haven't,you will get undefined.
How To Do In jQuery?
Use $ele.width() (if you want the "exact" width,use $ele.outWidth()),jQuery has done everything for you.
http://stackoverflow.com/a/16474226/2893073
-
=========================================
http://www.iteye.com/problems/50940
首先，你的代码中没有申明DTD，所以，在IE下，id=div1的div表现为height就是最小高，类似于min-height(IE6不识别该属性)，所以，它的高将随内容而走。默认的，浏览器里的字大小为16px，所以，你的div在IE下的高度就是16px，即使你设置了height，这个div的高度，仍然会随你的内容而变化。但是，如果你去FireFox下打开的话，那么，你设置的这个div的高度将是起作用的。因为，FireFox是遵守W3C标准的。具体的内容可以通过给div给border来查看。
举例：
<div style="height:6px;border:1px solid #000;">ABC</div>
将这个内容放置在一个单独的html中，分别用IE和FireFox打开看一下就可以知道差别了。
想让他们保持一致的话，请给页面的第一行加上一下内容：
<!DOCTYPE html>
然后在对比IE和FF
其次，div是一个无样式属性的标签，你对div设置的width，height都是错误的，这些属性只有写在style里或者css中才有效。
============================================
It's quite wrong to use ele.style.width to get the element's width!!!!!!
In native JavaScript,you can get a element's CSS through two ways:
Standard Method
window.getComputedStyle(ele)
For example,
var ele = document.getElementById("#content"),
eleStyle = window.getComputedStyle(ele);
/* Below is the width of ele */
var eleWidth = eleStyle.width;
IE(IE 8 And Before)
element.currentStyle
For example,
var ele = document.getElementById("#content"),
eleStyle = ele.currentStyle;
/* Below is the width of ele */
var eleWidth = eleStyle.width;
Why Not Use ele.style?
ele.style is just get the attribule style of ele.If you use ele.style.width,you can just get the width of ele.style,not the real width of ele.
If you have done something like
ele.style.width = "55px"
,you can get "55px" when using ele.style.widht.If you haven't,you will get undefined.
How To Do In jQuery?
Use $ele.width() (if you want the "exact" width,use $ele.outWidth()),jQuery has done everything for you.
http://stackoverflow.com/a/16474226/2893073
-
分享到：
发表评论
-
Javascript 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2591为什么使用 javascript 测试框架时，没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数（Arrow Function）
2018-01-25 13:46 1118一、简介 箭头函数（Arrow Function）是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2328刚出来不久的 ES8 包含了 async 函数，它的出现，终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 603点此查看全部： http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1618jQuery 3.2.1 Support Deskto ... -
基于HTML5实现的中国象棋游戏
2017-06-24 02:24 1688HTML5实现中国象棋游戏 http://www.w2bc.c ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3974浏览器处于安全原因，在使用 Ajax 进行请求访问时，不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 95525 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 666效果图： function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 723jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 660attr() 用于自定义属性，id ； prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 656Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2194JS操作iframe 1. 获得iframe的w ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1131前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 844详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 928通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之小应用：网页在线聊天
2016-11-08 11:48 4299概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10531. 判断两个字符串是否：字母相同切长度相同（空格不算）。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 916函数继承可以分为两种：1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 710一、用法 undefined 关键字有两种用法： 1. 如 ...
相关推荐
这个示例将显示一个绿色的`div`元素，并在其内部显示与之相关的各种尺寸和位置属性。通过观察这些值的变化，你可以更好地理解每个属性的含义及其在不同情况下的应用。 在处理跨浏览器的JavaScript代码时，需要注意...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了JavaScript代码的编写，尤其是在处理DOM操作、事件处理和动画效果等方面。"JQUERY弹出模式DIV"是指使用jQuery来实现一种常见用户界面设计——...
"基于EXT的div拖动"是指利用EXTJS这一强大的JavaScript框架来实现这种功能。EXTJS是一个用于构建富客户端Web应用的前端框架，它提供了丰富的组件库、数据绑定机制以及强大的布局管理，使得开发者可以方便地创建出...
在CSS中，我们可以使用各种属性来控制`div`的布局，如宽度（width）、高度（height）、边距（margin）、填充（padding）等。对于“移动伸缩Div”，可能需要用到定位（positioning）和响应式设计（responsive design...
<iframe src="https://www.example.com" width="600" height="400"> ``` 在这个小示例中，当用户点击图标时，会触发一个JavaScript函数，该函数负责显示或隐藏指定的Div。同时，这个示例还展示了如何利用JavaScript...
strGrid0 += '<td align="left" valign="middle" width="50" height="27"><span><a onclick="javascript:hiddenLayer(\'' + dvID + '\')" style="color: #FFFFFF; cursor: hand;">[关闭]</a></span></td>'; ...
var button = Ext.get('show-btn'); button.on('click', function(){ // create the window on the first click and reuse on subsequent clicks if(!win){ win = new Ext.Window({ el:'hello-win', layout:...
在前端开发领域，Ext JS 是一款非常流行的JavaScript框架，它提供了丰富的用户界面组件库，帮助开发者快速构建高性能的企业级Web应用程序。Ext JS中提供了多种实用的方法来操作DOM元素、获取组件以及执行其他常见...
var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height; 其中GetSize获取尺寸程序可以根据图片实际大小按比例缩放到要设置的大小： Code ...
例如，我们也可以使用css()方法来对DIV的top、left、height和width属性进行设置： ```javascript jQuery("#div_id").css({'top': top, 'left': left, 'height': height, 'width': width}); ``` 此外，我们也可以用...
PDF.js是Mozilla开发的一个开源JavaScript库，用于在Web浏览器中渲染PDF文档，无需任何外部插件或Flash支持。这个库的出现使得开发者可以方便地在手机端展示PDF内容，极大地提升了用户体验，因为用户不再需要安装...
"遮罩层 javascript js 数据提交"这个主题涉及到的是如何在JavaScript中实现一个遮罩层，并在用户点击提交按钮时，利用JavaScript处理数据提交的过程。在此过程中，遮罩层的出现和消失以及提交操作的执行，都是通过...
获取节点尺寸 即使隐藏了元素，也可以获取准确的元素尺寸！ 安装 npm install get-node-dimensions --save < script src =" ... log ( getNodeDimensions ( div ) ) // { width, height, top, r
问题在于，当切换div时，Echarts图表可能不会自动更新其渲染状态，导致图表不显示，控制台报错：“Can't get dom width or height”。 这是因为Echarts在渲染图表时需要一个已经显示的DOM元素来获取其尺寸，而动态...
swfobject.embedSWF("path/to/your.swf", "flashcontent", "width", "height", "9.0.0", "path/to/expressInstall.swf", flashvars, params, attributes); ``` 4. **备选内容** 对于没有Flash Player的用户，...
接下来，在JavaScript代码中，通过`Ext.get()`方法获取到`#content`元素的实际尺寸，并将其赋值给Grid的`width`和`height`属性： ```javascript width: Ext.get("content").getWidth(), height: Ext.get("content")...
ctx.drawImage(largeImage, x * largeImage.width, y * largeImage.height, zoomWidth, zoomHeight); }; }); }); ``` 在上面的代码中，我们首先获取图片元素和放大镜`<div>`，然后监听鼠标移动事件。当鼠标移动...
### 使用jquery.qrcode.js生成带logo的二维码 在本文中，我们将探讨如何使用`jquery.qrcode.js`插件来生成带有Logo的二维码，并将其转换为图片格式。此方法非常适合需要在网页上动态生成二维码的应用场景。 #### ...
背景div通过设置`position`为`absolute`，`left`和`top`为0，以及`width`和`height`为文档的宽度和高度，确保其完全覆盖页面。为了使背景有一定的透明度，使用了CSS滤镜（filter）和透明度（opacity）属性。 然后，...
<td width="93" height="20"><div align="center" style="color: #000000">商品名称：</div> <td colspan="5"><div align="left"> $info1[id];?>">$info1[mingcheng];?></a></div> <td width="93" height="20...