JS如何设置获取盒模型对应的宽高

最新推荐文章于 2024-04-12 16:46:15 发布
置顶 最新推荐文章于 2024-04-12 16:46:15 发布
阅读量2.9k 收藏 2
点赞数
文章标签： 获取盒模型对应的宽高 js 兼容性 通用性 计算元素绝对位置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_small_insect/article/details/79518439
版权
  1. dom.style.width/height(只适用获取内联元素的宽和高)
  2. dom.currentStyle.width/height(获取渲染后的宽高，但是仅IE支持)
  3. window.getComputedStyle(dom).width/height(与2原理相似，但是兼容性，通用性会更好一些)
  4. dom.getBoundingClientRect().widht/height(计算元素绝对位置，获取到四个元素left,top,width,height)

一号窗
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
threejs给模型添加外部轮廓demo
04-10
Three.js支持多种3D格式，如OBJ、FBX、GLTF等，你可以使用对应的加载器（如OBJLoader、GLTFLoader等）将模型导入到场景中。 2. **创建轮廓几何体**：一旦模型加载完成，你需要创建一个与原始模型相似但稍大的几何体...
three官网所有模型
08-10
"官网下载太慢，搬过来方便需要的朋友取用"这部分说明了这个压缩包的目的是解决用户从Three.js官网下载模型时可能遇到的速度问题，提供了一个本地下载源，使得开发者和设计师可以更快地获取和使用这些模型。...
用js获取盒子的宽高
m0_53852077的博客
04-12 558
当我们想要知道盒子的尺寸时（存在padding值需要计算/盒子未设置尺寸等情况），用js语法中的。在控制台可以看到盒子的高和宽。
JS如何设置和获取盒模型对应的宽和高
banchi6453的博客
09-27 596
㈠方式一：通过DOM节点的 style 样式获取 dom.style.width/height只能获取使用内联样式的元素的宽和高。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>>js获取盒模...
JS获取和设置盒模型对应的宽和高的四种方法
weixin_30338481的博客
08-02 681
工作中，对dom元素取宽高位置的情况并不少见，这篇就总结一下，如何用JS设置和获取盒模型的宽和高，以及，哪种方式才是最优选择。 1. dom.style.width/height 这种方法只能获取到内联样式的宽和高，而样式一般不回以内联方式写，所以这种方式不适用现在大多数的开发； 2.dom.currentStyle.width/height 这种方式只适用于IE，直接P...
js设置盒模型的宽高几种方式优劣
weixin_45514320的博客
04-22 217
1.dom.style.width/height 这种方式不支持来自外链的CSS样式表 2.dom.currentStyle.width/height 这种方式仅IE支持 3.window.getComputedStyle(dom).widht/height 相比第二种方法来说 兼容性是较好一点的 4.dom.getBondingClientRect().width/height 获取绝对位置 ...
【JavaScript-17】BOM-04 获取页面宽高、盒子宽高
前端代码小白的日常博客
08-02 1306
获得body的值，清空内外边距之后与以上两个相同,不包含内外边距，滚动条。兼容低版本的ie，页面可视的宽高不包含控制台，菜单栏，滚动条宽度。​//当父级有定位时，偏移量计算的是本身到有定位的父级的距离。​//当父级没有定位时，偏移量计算的是本身到页面的距离。​//当本身脱标时，偏移量就是本身的left/top。不包含控制台、菜单栏(低配版的ie不支持)，包含滚动条。获取的是实际宽度+内边距+边框=实际盒子的宽度。屏幕大小发生变化时触发。...
Javascript获取一个盒子的宽和高；
qq_32439313的博客
03-27 1万+
    使用offsetWidth获取高度，offsetHight获取宽度。    var width = document.getElementById("box2").offsetWidth;//宽度 var height = document.getElementById("box2").offsetHeight;//
JS如何获取盒模型的宽和高
weixin_34395205的博客
11-19 781
1）、node.style.width/height 这种方式只能取到dom元素内嵌样式的宽和高，通过外联样式link引入和在style标签中设置的样式这两者都是获取不到node的宽和高的，即只有这种： <p style="width:100px;height:50px">test</p> 但用这种方式可以设置node的宽与高，举个例子： documen...
JavaScript获取select中text值的方法
10-20
而`this.options[this.selectedIndex].text`则获取的是对应的文本，如“家电”、“数码”或“服饰”。`selectedIndex`属性表示当前选中的选项索引，`options`数组包含了所有`<option>`元素。 ### 方法二 在方法...
.net 网页的布局框架 iframe自适应高度 js设置链接样式
06-24
JavaScript可以遍历页面上的所有链接，通过`document.getElementsByTagName('a')`或`querySelectorAll('a')`方法获取链接元素集合，然后对每个元素应用样式。例如，可以改变链接的颜色、字体大小、鼠标悬停效果等，...
Model:mise js 模型超类
06-02
"Model:mise js 模型超类"意味着我们有一个基本的JavaScript类，它定义了模型的基本行为，如数据验证、数据同步、监听数据变化等。开发者可以继承这个超类，然后根据具体需求添加额外的功能。这样做的好处是可以避免...
Js中盒子模型的样式获取
Ayiayi00的博客
09-07 1429
可以使用几种方法实现浏览器的兼容的编写： 还是使用in的方法好一点点，因为判断getComputedStyle的方法是否存在与window中，直接返回true或者是false，而第二种方法还要根据返回的值转化为true或者false，这比较耗费浏览器的性能。 第三种方法是判断当前的浏览器类型，根据浏览器类型来判断采取那种方法（获取浏览器信息：window.nav
获取盒子模型的宽高，获取元素的宽高示例
ForMyQianDuan的博客
04-27 2137
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;获取盒子模型的宽高 &lt;/title&gt; &lt;style&gt; #dv1 {
JS获取图片实际宽高及根据图片大小进行自适应
aijiagui7454的博客
08-12 205
图片实际宽高使用js进行获取以及根据图片大小进行自适应。 JS获取图片实际宽高，以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> function adapt(){ //图片宽度自适应 //by www.jbxue.com var tableWidth = $(...
js获取盒子模型的高宽
yin_991的博客
01-28 2023
dom.style.width/height 只能获取到内联样式的属性值，外部样式、内部样式的属性值是获取不到的。 dom.currentStyle.width/height        只有ie支持 window.getComputedStyle(dom).width/height   通用性好 dom.getBoundingClientRect().width/height      ...
JS动态获取div的宽度、高度
热门推荐
Pete很皮
01-10 6万+
JS动态获取div的宽度var o = document.getElementById("div1");var w = o.clientWidth||o.offsetWidth;alert("Div1" width is "+w);JS动态获取div的高度同理：var o = document.getElementById("div1");var h = o.clientHeight||o.off
1111111111111111111111
最新发布
08-13
1111111111111111
three.js 导入模型 高德三维导入模型
10-16
在使用three.js导入高德三维模型之前，首先需要明确如何获取和准备相关模型数据。高德三维模型是通过高德地图API获取的，因此我们需要在项目中引入高德地图API库。 首先，在HTML文件中引入高德地图API库的脚本，如： ``` <script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_API_KEY"></script> ``` 其中，YOUR_API_KEY是你的高德地图API密钥。 然后，在three.js中创建一个场景、相机和渲染器： ``` var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 接下来，我们需要获取高德地图中的模型数据。可以使用高德地图API提供的AMap.Map类来创建一个地图对象，并在地图加载完成后获取模型数据： ``` var map = new AMap.Map('mapContainer'); map.on('complete', function () { // 获取模型数据并导入到three.js中 }); ``` 在complete事件中，我们可以使用高德地图API提供的AMap.Geometry类获取模型的几何信息，并将其转换为three.js中的Geometry对象。同时，可以使用AMap.Texture类获取模型的纹理信息，并将其转换为three.js中的材质。 最后，将几何对象和材质对象合并，创建一个Mesh对象，并添加到场景中： ``` var geometry = convertToThreeGeometry(AMap.Geometry); var texture = convertToThreeTexture(AMap.Texture); var material = new THREE.MeshBasicMaterial({ map: texture }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); ``` 其中，convertToThreeGeometry和convertToThreeTexture是将高德地图API返回的几何信息和纹理信息转换为three.js中对应对象的自定义函数。 最后，在渲染循环中更新相机和场景，并渲染场景： ``` function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render(); ``` 通过以上步骤，我们就可以成功地将高德三维模型导入到three.js中，并在网页中进行展示了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值