【关于offsetWidth innerWidth的使用】的更多相关文章

关于offsetWidth innerWidth的使用

最近因为有使用到offsetWidth 和innerWidth,刚开始以为这两个属性在jq何js之中是可以通用的,谁知道在js中使用innerWidth时,发现如果对页面元素使用它时,发现出来的是undefined,通过查询资料得知,该属性只能对window使用,也就是对窗口使用,所以在此弄一篇随便来记录一下.当然了,jq也不能直接使用offsetWidth,要先转为为dom对象才可以使用,列入$("#button")[0].offsetWidth; 以下是一些基本的属性: Javas…

CSS3无前缀脚本prefixfree.js与Animatable使用

现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,前缀少不了,每次都需要像盖高楼一样堆叠CSS3代码,如下图: .bg { width:400px; height:177px; margin:70px auto 0; padding-top:73px; position:relative; background-image:-we…

CSS3无前缀脚本prefixfree.js与Animatable使用介绍

要求 必备知识 本文要求基本了解 JAVASCRIPT 和 和 CSS3 基本知识. 运行环境 桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端:移动Safari,Android浏览器,Chrome浏览器和Opera Mobile. 演示地址 演示地址已经到文章中给出了,自己找找看哟. 现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不…

前端中 width 的获取

这篇文章其实是在了解 viewport 的过程中发现这些概念容易混淆做了个小小的总结.viewport的首要关键是宽度的获取,宽度的计算有下面几个属性和方法: clientWidth offsetWidth innerWidth scrollWidth getBoundingClientRect().width Element.clientWidth 非行内元素的内部宽度(inner width of an element),包括 padding,不包括 margin 和 border.行内元素…

【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（二）

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 播放模式切换 歌词滚动显示 一.播放器模式切换功能实现 按钮样式随模式改变而改变 动态绑定iconMode图标class: <i :class="iconMode"></i> import {playMode} from '@/common/js/config' iconMode(){ re…

prefixfree.js和依托应用之Animatable

http://www.zhangxinxu.com/wordpress/2011/11/css3-prefixfree-js-animatable/ http://leaverou.github.io/animatable/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Animatable: One prop…

JavaScript属性中的offsetLeft、offsetWidth、clientWidth、scrollLeft、scrollWidth、innerWidth

1.offsetLeft和offsetTop 只读属性,返回当前元素与父辈元素之间的距离(不包括边框).其中父辈元素的取法是有门道的: (1).若父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素的距离. (2).若父辈元素中没有定位元素,那么就返回相对于body的距离. (3).若当前元素具有固定定位(position:fixed;),那么返回的是当前元素与可视窗口的距离. <div id="a" style="width:400px;height:400p…

clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight

clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle clientHeight & clientWidth https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight https://d…

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox等. 一.测试1:无滚动条时,dom对象的offsetWidth.clientWidth和scrollWidth (1)测试代码 <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset=&q…

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

* offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下border-width * * clientWidth 水平方向 width + 左右padding * clientHeight 垂直方向 height + 上下padding * * offsetTop 获取当前元素到 定位父节点 的top方向的距离 * offsetLeft 获取当前元素到 定位父…