div的display变成none如何获取宽度vue

2024-09-02

如何获取设置display:none元素及子元素的宽高

由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了代码如何获取 id="ul" 元素的宽高??? html <section class="section none"> <div> <ul id="ul"> <li>第 <span class

若块级元素被设置为 display: table-cell 便无法设置宽度

工作中,遇到表格的单元格中的 div 设置宽度无效,后来是发现 div 被设置为 display: table-cell ,后将其修改为 display: block 则设置的宽度生效.

thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> $(function(){ var width = window.screen.width;//通用,各浏览器都支持获取宽度 width = width*0.5; var height = window.screen.height; height = height*0.66; $(".setSi

关于JQuery获取宽度和高度在chrome和IE下的不同

之前写了一个关于滚动条的东西,可是在写的时候发现JQuery在获取宽度和高度时在不同浏览器中是不一样的,下面发一下代码给给位看官先展示一下: $(function(){ $("#main").html( "$(document).width():"+$(document).width()+ "<br />$(document).height():"+$(document).height()+ "<br />$(w

同级div设置display:inline-block，父级div强制不换行

同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div id="container"> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lab

DIV中display和visibility属性差别

DIV中display和visibility属性差别 DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流本节向大家描述一下DIV中display和visibility的差别,visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征,虽然它们都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流. DIV中display和v

如何在 vuex action 中获取到 vue 实例

问题:在做运营开发工具的时候我想要请求后台服务器保存成功后弹出一个弹框(饿了吗的 message 弹框), 由于$message 是挂在 Vue原型链上的方法 (Vue.prototype.$message = Message;).以下action.js 中的this不指向Vue,因此以下代码会报错.Vuex 框架原理与源码分析 //action.js export const saveActivity = ({commit},params) => { return Fetch.post(

如何获取div距离浏览器顶部的高度，宽度，内容

JS就可以获取了, document.getElementById("DIV的ID或者其它选择").offsetTop;这是离顶部 JQ可以这样: $("#aaa").offset().top; //jq获取aaa元素距离body的距离 document.getelementbyid("ddhdh").innerHTML 可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid(

获取display:none的元素的宽度和高度

display为none的元素不能通过offsetWidth和offsetHeight来获取宽高(未参与css渲染), 解决方案:可以通过在display为none的元素使用行内样式style设置宽高,通过style.width 和style.height获取, 注意:样式不能写字css文件中.否则获取不到

一个设置为display:none;的div，在用.height()方法获取不到它的高，获取到的高度为0.

<div style="width:100px;height:100px;background:red;visibility:hidden"></div>//对象隐藏后,还有占有相应的空间大小 <div style="width:100px;height:100px;background:red;display:none"></div>//对象隐藏后,对象不占任何空间 CSS中的visibility和display两个

如何设计点击点击一个div，其他div做出对应反应，以及获取一个节点下的子节点

<div id="show"> <div>1</div> <div>2</div> <div>3</div> </div> <div id="click"> <div>click1</div> <div>click2</div> <div>click3</div> </div>

DIV CSS display(block,inline,none)的属性教程

display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是: 和其

关于div及display

1.DIV div被看作是一个盒子,可以设置width.height.这个盒子其实是由三部分构成width(height).padding.border.在默认情况下,所见到的div是border和padding为零的.故三者加起来也就是平时默认情况下div的宽高总和.对div设置属性box-sizing,则会影响div外观的大小(在border或padding不为零的情况下). box-sizing: content-box->div的宽高就是设置的宽高,但是这时如果设置了border或pad

关于 jquery和js获取宽度时只能取整数，取不到小数点

最近在改版自已的一个网站的时候,遇到了一个问题. 用jquery的width()函数获取元素宽度的时候,返回得到的是整数,而不是小数. 如下图,谷歌上显示的宽度为1078.89px 而我用控制台输出了 console.log( $('.mid-list').width() ); 结果如下为了排除先入为主的认为四舍五入,我又调整了元素的宽度,为1079.1px 得出的结果,依然是1079 显然,其算法确实是四舍五入. 以防万一,我又试了document.getElementById().offs

JS获取宽度高度大集合

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

js获取宽度

alert(window.screen.width );//浏览设备的分辨率(电脑.手机.平板等) alert(window.screen.availWidth );//浏览设备的实际可用宽度(电脑.手机.平板等) alert(window.innerWidth);//浏览器的可用(内部)宽度(包括滚动条等)[ie不支持] alert(document.documentElement.clientWidth || document.body.clientWidth);//浏览器实际的可用文档宽度

可编辑div中包含子元素时获取光标位置不准确的问题

前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPointPorsiton1() { if (window.getSelection) { var range = window.getSelection().getRangeAt(0);//创建range } else if (document.selection) { var range = doc

关于div设置display: inline-block之后盒子之间间距的处理

当两个盒子都设置display: inline-block之后并且css也清除了默认样式这时候会发现div盒子之间仍然存在间隙将font-size清0间距就会取消

[转]js 获取浏览器高度和宽度值(多浏览器)（js获取宽度高度大全）

IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==>可见区域宽度 document.documentElement.clientHeight==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.bod

display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）

首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block; width: 15%; line-height: 80px; vertical-align: middle; } .nav{ /* 导航*/ position: relative; display: inline-block; top:0px; width: 70%; line-height:

多个div使用display:inline-block时候div之间有间隔

开发场景中用到display:inline-block;然后呢,div间就有间隙,但是ajax加载出来的数据没有间隙,解决办法如下 display:inline-block表示行内块元素,后面自带空格字符.当然有空隙,如果想去掉空隙,在父系上加font-size:0:然后,在子div上加一个font-size