使用js如何设置、获取盒模型的宽和高
第一种:
dom.style.width/height
这种方法只能获取使用内联样式的元素的宽和高。
第二种:
dom.currentStyle.width/height
这种方法获取的是浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。
第三种:
window.getComputedStyle(dom).width/height
这种方法获取的也是浏览器渲染以后的元素的宽和高,但这种写法兼容性更好一些。
第四种:
dom.getBoundingClientRect().width/height
这种方法经常使用的场所是,计算一个元素的绝对位置(相对于视窗左上角),它能拿到元素的left、top、width、height 4个属性。
使用js如何设置、获取盒模型的宽和高的更多相关文章
- JS设置和获取盒模型的宽和高
JS设置和获取盒模型的宽和高 dom.style.width/height:只能取出内联样式的宽度和高度 dom.currentStyle.width/height:获取即时的计算的样式,但是只有IE ...
- JS如何设置和获取盒模型对应的宽和高
㈠方式一:通过DOM节点的 style 样式获取 dom.style.width/height 只能获取使用内联样式的元素的宽和高. <!DOCTYPE html> <html ...
- 【Android】获取控件的宽和高
有时候我们须要在Activity的时候获取控件的宽和高来做一些操作,以下介绍三种获取宽和高的方式: 1. onWindowFocusChanged @Override public void onWi ...
- JS获取盒模型对应的宽高
## 获取内联样式宽高 只能获取内联设置的样式,在style或者.css文件中设置的无法获取 let div = document.querySelect('.test'); let width = ...
- 获取jsp页面的宽和高
var winWidth; var winHeight; function getResult() { if(window.innerWidth) { winWidth=window.innerWid ...
- POI获取单元格的宽和高
获取单元格的宽,即获取所在列的宽.先获取单元格所在的sheet:cell.getSheet() sheet.getColumnWidth( cell.getColumnIndex() ) 单位不是像 ...
- js封装设置获取cookie
var docCookies = { getItem: function (sKey) { return decodeURIComponent(document.cookie.replace(new ...
- ImageMagick:获取一行文字的宽与高
double *fm = MagickQueryFontMetrics(mw_temp, dw_wand, text_utf8); //获取文字在指定字体和字号下的宽度和高度 double textW ...
- 深入理解CSS盒模型
如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起.这种看似简单的题其实是最不好答的. 下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种 ...
随机推荐
- ros kinetic安装rbx1
1.首先安装一些依赖包 sudo apt-get install ros-kinetic-turtlebot-bringup \ ros-kinetic-turtlebot-create ros-ki ...
- python,Day1,基础1
主要内容 1.python介绍 2.发展史 3.安装 4.hello world程序 5.变量 6.用户输入 7.模块 8.数据类型 9.数据运算 10.if...else语句 11.while循环 ...
- Maven项目集成Jetty
1.新建webapp maven项目. 项目目录结构如下. 2.pom文件添加jetty构建. <project xmlns="http://maven.apache.org/POM/ ...
- rabbitMq交换机direct、topics
一: direct 上面我用采用了广播的模式进行消息的发送,现在我们采用路由的方式对不同的消息进行过滤 发送端代码 public class RoutingSendDirect { private s ...
- vb配置下位机CAN寄存器小结
2011-12-14 18:44:32 效果图 1,完成设计(由于没有eeprom等存储设备,所以每次上电后需要通过串口配置某些寄存器).在设计中,列出技术评估难度,并进行尝试,参看<我的设计& ...
- ASP.NET 教程汇总
channel9 https://channel9.msdn.com/ .net core项目实战 https://study.163.com/course/introduction.htm?cour ...
- IDEA建立Spring MVC Hello World 详细入门教程
https://www.cnblogs.com/wormday/p/8435617.html
- 小米5查看设备号信息及验证type-c数据线
首先,下载adb软件. 接着打开系统的开发者模式和调试模式. 打开cmd软件,切换到adb软件文件夹所在路径,输入命令:adb devices,则能看到设备的设备号信息. 如果设备号是00000001 ...
- Linux直播推流
Linux系统实现youtube推流直播 系统:centos-7 软件:FFMPEG, youtube-dl 1. 安装FFMPEG 创建并cd到一个目录,下载最新的FFMPEG(下面是64位,32位 ...
- C# 简单粗暴写日志
public static void WriteLog(string text) { string path = AppDomain.CurrentDomain.BaseDirectory; path ...