js改变css宽高 - 腾讯云开发者社区

文章/答案/技术大牛

发布

JS获取图片原始宽高

最近在给博客的相册模块做优化，需要知道图片的原始大小，我以前的做法是把图片的真实宽高分别放在data-width和data-height中，效果是达到了，但是总觉得扩展性很低，当不知道图片的大小时，还要一张一张图片的去查看图片信息手动输入图片大小...，很繁琐获取图片大小： 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度也就是说如果图片原始大小1200，使用css或者width属性设置为600，那么这里拿到的宽度为600，显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...document.createElement("img") img.src = "1.jpg" var width = img.width 动态创建一个imgElement，通过给src赋值，最终来获取img的宽和高...var width = img.width } img.src = "1.jpg" 3.使用naturalWidth(推荐) 使用HTMLImageElement.naturalWidth拿到图像在CSS

8.1K2 0

css中使用calc()计算宽高

简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。...用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算，使用“+”、...class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px 3、rem rem是CSS3...4、% % 百分比，相对长度单位，相对于父元素的百分比值元素宽高与字体大小使用区别：（1）尽量使用相对尺寸单位使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小...如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。

8031 0

您找到你想要的搜索结果了吗？

是的

没有找到

js获取各种距离和宽高

以当前的元素的左上角为原点, 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX 以浏览器窗口(视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变...clientY 以浏览器窗口(视口)的左上角为原点, 距离视口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点, 距离页面顶部的距离, 随页面滚动而改变 pageY 以整个页面的左上角为原点..., 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部的距离 screenY 以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离元素的宽高及各种距离...宽高属性说明 clientHeight/clientWidth 包括元素的可视部分的高度/宽度包括width/height和padding不包括border和滚动条如果是content-box,则为

2.4K1 0

《CSS 世界》读书笔记-流与宽高

内联元素最大的特点就是：可以和文字在一行显示，除此之外，它的高，行高及外边距和内边距不可改变。穿着 inline 的皮藏着 block 的心每个元素都有两个盒子，外在盒子和内在盒子。...外在盒子负责让元素可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的，也叫容器盒子。...而内在盒子实际是负责了元素的宽高和内容。内在盒子由内到外又可分为：content box、padding box、border box 和 margin box。...仔细地看，我们会发现 content box 是环绕着 content 给定宽高的矩形，所以 width: 100px 作用在了 content box 上。...3.5 改变 width/height 作用细节的 box-sizing box-sizing 属性改变了 width 作用的盒子。

2.2K2 0

js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高

需求实现父 div 里面左右，上下动态分割 div，并上下改变父 div 的高度，并且宽和高都是按百分比（如图）。 ? 2....拖动改变左右的 label 时，向左时，label 的父 div 的宽变小，label 的父 div 相邻的右边的 div 宽度变大。...3. js 实现代码： /** * name: split.js * author: biaochen * date: 2018-12-26 * */ $(function()...biaochenxuying/split 效果体验地址： https://biaochenxuying.github.io/split/index.html 初始代码是从网上来的，不过网上的并不完整，父 div 的高也不能改变...，并且孩子的宽高并不是百分比的，布局也并不合理，所以修改成这样子。

11.5K3 0

js获取屏幕以及元素宽高的方法

一.window相关网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：...document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽...) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight...网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 三.滚动相关 scrollHeight: 获取对象的滚动高度。...height是指可见内容的高 clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding

9K2 0

按照原宽高获得等比新宽高

随便贴代码点击(此处)折叠或打开 #include <stdio.h> int get_divisor(int x, int y) { in...

1.3K4 0

JS实现本地预览上传图片并获取宽高

JS部分： function selectImg(file) { if (!file.files || !

10.7K2 0

iOS 计算NSString宽高与计算NSAttributedString的宽高

开篇项目有一个客服反馈功能，用到的是聊天列表的形式，这就免不了计算字符串的宽高，由于要给字符串加间距，没办法，只能用 NSAttributedString 所以要计算NSAttributedString...的长宽计算NSString宽高计算NSString宽高很简单，代码如下： //返回字符串所占用的尺寸. - (CGSize)sizeWithFont:(UIFont *)font maxSize:(...包含大小信息） maxSize 是一个最大的距离：如我最大的宽度只让他为200，高度不限，则传入： CGSizeMake(200 , CGFLOAT_MAX) 计算NSAttributedString宽高

5.9K3 0

Fabric.js 3个api设置画布宽高

本文简介使用 Fabric.js 创建画布时，可以在参数里配置画布的宽高。除了初始化时设置之外，Fabric.js 还提供了其他 api 供后期修改画布宽高。...本文列举了 Fabric.js 的3个 api 设置画布宽高。这3个 api 虽然简单，但在实际开发中可能很重要。比如监听浏览器窗口缩放，动态调整画布的宽高。...高度300px 一键设置宽高...fabric.Canvas('canvasBox', { width: 100, height: 100 }) } 仓库及推荐阅读仓库原生方式实现设置画布宽高...在Vue3中使用Fabric实现设置画布宽高

2.9K4 0

【面试题解】宽高固定的12种和宽高不固定的29种CSS居中方案。

green; } 宽高固定...position: relative; } .content { position: absolute; left: 200px; } 3.transform 利用 CSS3...position: relative; } .content { position: absolute; top: 200px; } 3.transform 利用 CSS3...relative; } .content { position: absolute; left: 200px; top：200px； } 3.transform 利用 CSS3...container { overflow: hidden; } .content { margin-left: 200px; margin-top: 200px; } 宽高不固定

8554 0

TextField的高宽autosize

如果不设置可能会让父容器宽高变大，遮挡住别的窗口的鼠标事件。可以简单地使用tf.autoSize=TextFieldAutoSize.LEFT;来解决这样宽高就会根据文本内容大小来调整了。

1.7K1 0

ReactNative 获取屏幕宽高

需要导入Dimensions let Dimensions = require('Dimensions'); // 示例 class KKScreen { ...

2.8K4 0

获取元素尺寸宽高

DOCTYPE html> 2 3 4 5 6 获取元素尺寸宽高 19 20 Prosper 21 22 23 /** 24 * 获取元素尺寸宽高

2K3 0

Flutter 获取屏幕宽高

屏幕宽度： MediaQuery.of(context).size.width 屏幕高度： MediaQuery.of(context).size.height

2.4K1 0

js 获取屏幕各种宽高的方法(浏览器兼容)

屏幕的有效宽高： window.screen.availHeight window.screen.availWidth 网页可见区域宽：document.body.clientWidth 网页可见区域高...：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight...(包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop... 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height...clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS

4.6K10 0

js图片监听onload事件，依然有获取不到宽高的场景

背景在实际开发中，移动端页面遇到的，采用正常写法，图片 src赋值写在 onload 事件监听后面，依然会有拿不到图片真实宽高的场景，获得的图片宽高都为0，真的是好坑啊。...var img = new Image() // 加载完成执行 img.onload = function(){ console.log(img.width,img.height) } // 改变图片的...new Date().getTime() // 图片地址后面加时间戳是为了避免缓存 var img_url = "xxx.jpg" // 创建对象 var img = new Image() // 改变图片的...src img.src = img_url // 定时执行获取宽高 var check = function(){ // 只要任何一方大于0 // 表示已经服务器已经返回宽高 if (img.width

5K2 0

CSS 思考 ☞『CSS in JS』 or 『JS in CSS』 ?

CSS in JS 前面写了一篇： CSS in JS = JSS , 这个库你知道吗？ - 掘金在评论里有人说：同时还发了一个沸点：你听说过 JSS 吗？...在 JS 中写 CSS，感觉有点奇葩。...JS in CSS 后来又了解到：除了 CSS in JS，还有一种方向是 JS in CSS；尤雨溪在 Vue3.2 提出，目的是：让我们可以在 css 中使用 js 变量。...JS 是把 CSS 写在 JSX 模板中； JS in CSS 是把 JS 变量写入 CSS 中；想想我们在 Vue2 中，想动态控制样式，我们通常这样： JS 还是 JS in CSS，总之都想整合 JS 和 CSS 的能力，梳理一个新的模板规范。

30.2K6 2

手动测量 View 的宽高

简单说明手动调用 View 的 measure(int widthMeasureSpec,int heightMeasureSpec) 方法来得到 View 的宽高。...根据 View 的 LayoutParams 以下几种情况具体数值（dp/px）举个栗子，宽高都是 100 px，这时候，有我们来手动拼装合适的 MeasureSpec： /** * 手动测量...View 的宽高,当 View 的宽高是精确值时 * * @param target 需要测量的 View * @param widthSize 宽度 * @param heightSize...,当 View 的宽高是 wrap_content 时 * * @param target 需要测量的View */ public void measueManually(View...ResourceType return MeasureSpec.makeMeasureSpec(resultSize, resultMode); } 发现如果要构造在 View 的宽高为

1.9K6 0

文档宽高及窗口事件

document.documentElement.offsetHeight); alert(document.body.offsetHeight); onscroll：当滚动条滚动的时候触发 onresize：当窗口大小发生改变的时候触发

1.4K2 0

点击加载更多

JS获取图片原始宽高

css中使用calc()计算宽高

js获取各种距离和宽高

《CSS 世界》读书笔记-流与宽高

js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高

js获取屏幕以及元素宽高的方法

按照原宽高获得等比新宽高

JS实现本地预览上传图片并获取宽高

iOS 计算NSString宽高与计算NSAttributedString的宽高

Fabric.js 3个api设置画布宽高

【面试题解】宽高固定的12种和宽高不固定的29种CSS居中方案。

TextField的高宽autosize

ReactNative 获取屏幕宽高

获取元素尺寸宽高

Flutter 获取屏幕宽高

js 获取屏幕各种宽高的方法(浏览器兼容)

js图片监听onload事件，依然有获取不到宽高的场景

CSS 思考 ☞『CSS in JS』 or 『JS in CSS』 ?

手动测量 View 的宽高

文档宽高及窗口事件

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐