首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原生JavaScript获取元素margin外边距

最近想找一个可以获取元素高度(包括外边距margin方法,原生JS实现方法一直没有找到,不过有一个方法可以获取元素边距,记录一下: 语法是(获取元素属性): getComputedStyle...document.defaultView.getComputedStyle(element[,pseudo]); 或者: window.getComputedStyle(element[,pseudo]); element 需要读取元素...let my_div = document.getElementById("myDiv"); let style = window.getComputedStyle(my_div, null); 获取元素上边距...,JS可以这样写: //    兼容IE和火狐谷歌等写法     if (window.getComputedStyle) {         var computedStyle =...而不同点就是: element.style 读取只是元素内联样式,即写在元素 style 属性上样式;而 getComputedStyle 读取样式是最终样式,包括了内联样式、嵌入样式和外部样式

9K10
您找到你想要的搜索结果了吗?
是的
没有找到

js获取元素几种形式

通过id获取元素 document.getElementById('div');//获取id为div元素 通过class获取 document.getElementsByClassName('top'...);//获取页面中所有的class为top元素集合 通过标签名获取 document.getElementsByTagName('p');//获取页面中所有的标签为p元素集合 通过name获取 document.getElementsByName...('user');//获取页面中所有的name为user元素集合 注意:通过class,name标签名抓取元素是一个集合,即使该类只有一个符合要求元素目标,也返回是一个集合,因此可以存储变量,通过变量名...[0]获得第一个符合要求标签目标....简单可以将返回的当做一个存储符合数组,通过下标进行找到指定位置. 当然也可以使用数组方法返回,集合目标数. alert(tops.length)可以提示出class为top目标数

25.2K30

jquery获取第几个子元素_js获取元素指定子元素

可以这样理解,页面中元素有相同元素 ,并且里面又包含li元素,那么就取第一个li元素,每个子类集合都要进行判断,直到找出所有符合要求li元素; :last-child:这个也与上面相对了,...An+B所有子节点,比如3n+1返回所处位置为父节点子元素是3倍数加1那个子元素; :even:页面范围内处于偶数位置元素,如:li:even返回全部偶数li元素; :odd:页面范围内处于奇数位置元素...(n):第n个匹配元素(不包括)之后元素(n从0开始),如:ul:gt(2)返回从第3个ul开始所有ul元素(含第三个); :lt(n):第n个匹配元素(不包括)之前元素(n从0开始),如:ul...F所有子元素(F可以为E子类子类,甚至更远); E>F:匹配父元素E下所有标签名为F直接子元素; E+F:匹配所有标签名为F元素,并且有E类型兄弟节点在该F元素之前(E,F紧挨着); E~...C等效于*.C; E#I:匹配id为I所有元素E,#I等效于*#I; E[A]:匹配带有属性A所有元素E; E[A=V]:匹配所有属性A为V元素E; E[A^=V]:匹配所有元素E,且A属性

27K30

js:如何获取select选中

我想获取select选中value,或者text,或者…… 比如这个: <option value=”A” url=”http://www.baidu.com...; // selectedIndex代表是你所选中项index 3:拿到选中项optionsvalue: myselect.options[index].value; 4:拿到选中项options...text: myselect.options[index].text; 5:拿到选中项其他,比如这里url: myselect.options[index].getAttribute(‘url’...); 二:jQuery方法 1:var options=$(“#select option:selected”); //获取选中项 2:alert(options.val()); //拿到选中项...3:alert(options.text()); //拿到选中项文本 4:alert(options.attr(‘url’)); //拿到选中项url 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人

26.2K30

行内元素padding和margin是否无效

首先行内元素是否具有盒子模型? 答:行内元素同样具有盒子模型。 行内元素padding、margin是否无效?...答: 行内元素padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效 行内元素padding-left、padding-right、margin-left...、margin-right属性设置是有效 行内元素padding-top、padding-bottom从显示效果上是增加,但其实设置是无效。...,margin-top和margin-bottom也是无效, padding-left、padding-right、margin-left、margin-right都是有效。...总结:行内标签(也叫内联标签)padding和margin左右设置有效,而padding上下有显示效果,但是设置无效,margin上下也是设置无效,显示也无效。

2.4K20

元素margin-top导致父元素移动问题

问题分析 在MDN上面有这么一段文字: 块上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距最大,这种行为称为边距折叠。...3、空块级元素元素Bmargin-top直接贴到元素Amargin-bottom时候(也就是中间元素没有内容),也会发生边界折叠。...solid transparent; middle元素设置padding:padding-top: 1px; 注意事项 如果参与折叠margin中包含负值,折叠后margin为最大正边距与最小负边距...(即绝对最大负边距)和;也就是说如果有-10px,10px,30px叠在一起,margin范围就是 30px-10px=20px。...如果所有参与折叠外边距都为负,折叠后外边距为最小负边距。这一规则适用于相邻元素和嵌套元素

2.3K20

js获取元素样式之getComputedStyle方法

习惯了jquery同学应该都知道获取元素样式方式可以直接写成(obj).css(style);更方便获取高度宽度等一些样式可以直接使用(obj).height()和 一、 getComputedStyle...是什么 getComputedStyle是一个可以获取当前元素所有最终使用CSS属性。...为什么要用这个属性呢,是因为通过document.getElementById(element).style.xxx可以获取元素样式信息但是对于通过class属性引用外部样式表就获取不到了。...但是getComputedStyle属性是只读属性,只能读属性,不能设置,但是他可以获取元素最终样式信息。...,差别在于element.currentStyle返回元素当前应用最终CSS属性(包括外链CSS文件,页面中嵌入属性等)。

22.4K30
领券