useRef 获取不到clientWidth

2024-08-24

useRef获取DOM元素和保存变量（十）

useRef在工作中虽然用的不多,但是也不能缺少.它有两个主要的作用: 用useRef获取React JSX中的DOM元素,获取后你就可以控制DOM的任何东西了.但是一般不建议这样来作,React界面的变化可以通过状态来控制. 用useRef来保存变量,这个在工作中也很少能用到,我们有了useContext这样的保存其实意义不大,但是这是学习,也要把这个特性讲一下. useRef获取DOM元素界面上有一个文本框,在文本框的旁边有一个按钮,当我们点击按钮时,在控制台打印出input的DOM元素,

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (windows.innerHeight) winHeight = windows.innerHeight;

style="display"之后不能获取offsetHeight或clientWidth这类测量的值

如果在html元素中设置了style="display:none;height:90px;"的属性后,是无法获得offsetLeft ,offsetWidth,offsetTop,offsetHeight以及兼容性更好的clientHeight,clientHeight等(client..属性会比offset大些,因为可能包含边框或滚动条)这类测量的值,因为一旦display:none之后浏览器没有渲染也就不会去测量.但你可以得到style中的height:90px;还有你在style

图解clientWidth，offsetWidth，scrollWidth，scrollTop

新手看到这几个属性,很头疼,参考了网上一些文章,加上自己实践,给出对这几个属性的解释我把代码贴上来,方便大家验证在chrome浏览器中,不知为什么图片容器高度比图片高度多了4px,把图片设置为block或者是容器的fontSize设置为0可解决这个问题. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&quo

javascript 获取页面尺寸/位置

************************************************************************//ie中如果全部不给定值则会都为零(宽和高在设置一个的情况则会正常获取值),ff中则返回撑开区域的大小元素所占区域的大小,包含padding不含border(有滚动条时会去除滚动条,可视区域的大小) 滚动条为17px此属性作用于行内元素时获取的都为0, 但当设置为 inline-block时,如果都ff/ie则可以根据内容自动获取宽高 clientWi

React 新特性学习

1 context 2 contextType 3 lazy 4 suspense 5 memo 6 hooks 7 effect hooks =========== 1 Context 提供了一种方式,能够让数据在组件树中传递而不必一级一级手动传递 (但是不要滥用,因为它会破坏组件的复用性) API: createContext(defaultValue) 示例1:基本用法 import React,{ Component,createContext } from 'react';//在这里导

JS判断终端设备跳转PC端、移动端相应的URL

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <meta content="yes" name="apple-mobile-web-app-capable" /> &l

js判断移动终端url跳转

CODE <script> //判断终端url跳转 function sp_isMobile() { return Boolean(navigator.userAgent.match(/.*(iphone|ipod|android|symbian|nokia|blackberry| rim |opera mini|opera mobi|windows ce|windows phone|up\.browser|netfront|palm-|palm os|pre\/|palmsource|ava

使用原生JS定位网页元素

约定:1.<meta name="viewport" content="width=device-width">这种标记简称"wdw"="width=device-width" 约定:2.viewport简称vp 约定:3.常用的属性会有"★"标志都是只读属性! 其中Chrome或FF没通过的属性标记(未实现) window对象: 1.★innerHeight:文档(网页)显示区的高度,以像素

【MarkMark学习笔记学习笔记】javascript/js 学习笔记

1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作符)都是区分大小写的. 3.2, 3.3, 3.4, 3.5, typeof 用于基本类型的判别,instanceof用于引用类型(Object类型)的判别. 3.6, 3.7, 3.8,Boolean类型有两个取值:true 和 false(区分大小写).使用Boolean()函数如下:注意,除n

火狐对SVG的兼容性

使用d3在SVG中画流程图,需要获取流程图的宽,高,来给流程图居中布局.在Chrome中正常显示,可是在火狐中svg流程图在容器内偏移,查看很不方便.在网上百度了,找不到火狐对d3的兼容性,所以就自己在代码里log突然发现在获取svg的clientWidth和clientHeight时,结果都为0,和Chrome的值差别很大.所以要使用办法解决后续再更新

JavaScript面试（-------------------------------------------）

this是什么方法调用模式构造器调用模式函数调用模式 apply/call模式 this是什么 —大多语言中,’this’代表由类实例化的当前对象.在JavaScript中,’this’通常表示’拥有’方法的对象,但具体取决于一个函数被调用的方式. 方法调用模式当一个函数被保存为对象的一个属性并调用该方法时,this被绑定至该对象.即使用”obj.method”形式 var val = "outer"; var methodCall = { val: "inner&

hxq的库

在页面中使用可以调取html模板 /** * Created by DY040 on 2017/10/31. */ var hxq = { init: function () { var self = this; // self.router.init(); // self.rem(); rem适配 }, router: { init: function () { var self = this; self.getNode(); // console.log(self.getNode) },

真的,移动端尺寸自适应与dpr无关

做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解. 1. 什么是尺寸自适应首先标题说的自适应,可能自适应在不同人眼里理解不同,特别与响应式的关系,在这里说一下我所理解的自适应,和其与响应式的区别.先说响应式设计,响应式设计表示在不同的屏幕尺寸下,都有良好的布局和内容表现,简单一点的说,就是一个页面可以适配多种不同尺寸的屏幕,而且看上去还是设计良好的.为了实现这个目的,可能会利用js或者css

offset 、 client 和 scroll - PC端网页特效

1.元素偏移量 offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以动态得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2.获得元素自身的大小(宽度和高度) 3.返回的数值都不带单位 1.2 offset 系列常用属性(元素以带有定位的父亲为准,如果没有父亲,或者父亲没有定位,则以 body 为准) element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.offsetLeft

PC端网页特效

元素偏移量offset系列 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:放回的数值都不带单位 offset系列常用属性 offset系列属性作用 element.offsetParent 返回作为该元素带有定位的父级元素,如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上分的偏移 element.offsetLe

React Hooks 完全指南，读React作者博文感悟（2W字精华）

阅读 facebook大佬:Dan Abramov 的文章颇有感悟大佬 github地址 https://github.com/gaearon 重点总结 useEffect 是同步的状态是捕获的当前 props 和 state 可以通过 useRef 获取改变后的 props 和 state 依赖项 [] 不能欺骗复杂的状态变化应该使用 useReducer 可以使用 useCallback 设置依赖可以使用 useMemo 让复杂对象做动态改变但有时候当你使用 useEffect你总

React-Hooks 学习概览

React-Hooks的函数组件方式代替原来的类继承,简化代码风格,好处是大大的: 1.useState 用来声明状态变量.要从三方面掌握:声明.读取.使用.(注意:useStae是不能进行条件语句判断的) 2.useEffect 就相当于类组件中的 componentDidMount.componentDidMount. componentWillUnmount 解绑只需要将它第二个参数设置为 [ ]; 3.父子组件进行传值:useContext 第一步引入useConte

React Hooks总结

Hook 前言什么是Hook 自从 16.8 版本开始,hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性. 那么在 React Hooks 出现之前,class 类组件和 function 函数组件有什么区别?Hooks 出现之后,函数组件又是如何满足原来只有类组件才有的功能的? 1.类组件和没有 hooks 加持的函数组件: 函数组件常被称为无状态组件,意思就是它内部没有状态管理,只能做一些展示型的组件或者是完全受控组件.因此差别主要体现在:

前端Web APIs 二

day04 - Web APIs 学习目标: 能够说出常用的3-5个键盘事件能够知道如何获取当前键盘按下的是哪个键能够知道浏览器的顶级对象window 能够使用window.onload事件能够使用window.onresize事件能够说出两种定时器的区别能够使用location对象的href属性完成页面之间的跳转能够使用location对象获取url中的参数部分能够使用history提供的方法实现页面刷新 1.1. 常用的键盘事件 1.1.1 键盘事件 <script>

useRef 获取不到clientWidth

热门专题