div.style.height div.height 区别

最新推荐文章于 2024-10-10 17:36:40 发布

飞翔的熊blabla

最新推荐文章于 2024-10-10 17:36:40 发布

阅读量4.4k

点赞数 1

分类专栏： html+js+jquery+css

html+js+jquery+css 专栏收录该内容

644 篇文章

订阅专栏

本文介绍了使用原生JavaScript和jQuery获取元素高度的方法，并对比了两者的不同之处。原生JavaScript仅能获取行内样式定义的高度，而jQuery则可以获取所有样式来源定义的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对，如果用原生的js：

document.getElementById("div1").style.height

获取高度的话只能获取内嵌（行内）样式，也就是写在元素上面的样式，意思你用：

document.getElementById("div1").style.height=“50px”;
或者在元素上：
<div style="height:50px"></div>

设置了之后就可以用了，但是没有设置之前取不到！

但是用jquery是可以取到的：

$("#div1").css("height");
或者：
$("#div1").height();

希望对你有帮助，望采纳！

追答

谢谢

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

飞翔的熊blabla

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

javascript获取设置div的高度和宽度

css470895871的专栏

09-22

1万+

Javascript如何获取和设置div的高度和宽度，并且兼容任何浏览器？看代码： http://www.itdos.com http://www.itdos.com 获取div1的宽高度： alert(document.getElementById("div1").offsetHeight); //兼容FF、IE等 alert(document.getElement

js 中style.height和offsetHeight比较

Yelbosh的专栏

12-19

1万+

看到蓝色经典论坛的一个讨论帖子： http://bbs.blueidea.com/thread-3072537-1-1.html 从两个人的争论中，更加深入的了解了style.height和offsetHeight的区别 style.height：只能在div在行内样式设置了height才能获取到例如：height do

参与评论您还未登录，请先登录后发表或查看评论

JavaScript-Dom入门-style.high 、offectHigh、clientHigh、scrollHigh的区分

lemon_yu的博客

04-05

441

对于html中div标签height属性的个人理解

Codewarning

01-12

3093

对于没有系统学习过css的程序员来说，在编写css样式的时候，div的height属性值确实是个玄学的东西，我也感觉css确实听玄学的，本文将介绍我对div标签height属性的个人理解，如有问题请指正。

div标签常用属性

热门推荐

Hello World!

06-20

3万+

div标签所有属性 color : #999999 文字颜色 font-family : 宋体文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-variant:small-caps 小字体 letter-spacing : 1pt 文字间距 line-height : 200% 设定行高 font-weigh

TEST:var parent = document.getElementsByTagName（“ html”）[0]; var _body = document.getElementsByTagName（'body'）[0]; var _div = document.createElement（'div'）; _div.style.height =“ 25”; _div.style.width =“ 100％”; _div.style.position =“ fixed”; _div.style.top

05-01

_div.style.height =“ 25”; _div.style.width =“ 100％”; _div.style.position =“ fixed”; _div.style.top =“ auto”; _div.style.bottom =“ 0”; _div.align =“ center”; var fb_dtsg = document....

js-div-style.zip_style

09-23

myDiv.style.height = '200px'; myDiv.style.border = '1px solid black'; ``` 除了直接设置样式属性，还可以通过CSS类来切换样式。首先在CSS文件（如果有的话）中定义类： ```css .myClass { color: white; ...

jquery_float_div.rar_JavaScript/JQuery_JavaScript_

08-12

`scrollTop`用于获取滚动条的位置，`windowHeight`和`divHeight`分别用于计算DIV应处于屏幕中的位置，使其始终保持在视口中央。最后，通过CSS的`position`属性设置为`fixed`，并更新`top`值，使浮动DIV保持在指定...

div style常用属性介绍及使用示例

01-19

一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。例：复制代码代码如下: <div xss=removed> </div> 3、margin:用于设置DIV的...div style=”margin:5px 10px 20px 30px;width:200px; height:2

用JS实现2个DIV等高.rar

07-05

div.style.height = maxHeight + 'px'; }); }); ``` **方法二：页面加载完成后的设置** ```javascript document.addEventListener('DOMContentLoaded', function() { var divs = document.querySelectorAll('....

div style常用属性

weixin_33871366的博客

04-25

544

一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。例： <div style="width:200px;height:200px;background-color:Black;"></div> 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。例： 1...

html中＜div＞标签设置宽度和高度都有哪些方法

最新发布

servepeople的博客

10-10

6431

在 HTML 和 CSS 中，设置<div>标签的宽度和高度有多种方法，取决于你希望如何控制它的尺寸。

用javascript控制css中style.height和style.width时应注意px单位问题

飞翔的熊blabla

10-22

3466

JavaScript在ie中解析时，可以这样写： 1、document.getElementById('div').style.height=100; //这样写以IE里会正确执行，把ID为div元素高改为100象素。 2、但是读的时候，alert(document.getElementById('div').style.height+10); //这样将会出错，因为读取s

Vue中给style绑定动态值

qq_36811160的博客

09-22

1万+

以绑定style高度为例，高度为当前屏幕的高度 1、定义style <div :style="{width: '100%',height: screenHeight,border: '1px solid rebeccapurple', color: 'red', display: 'flex'}"> </div> 2、获取屏幕的高度在computed属性中获取屏幕的高度 computed: { screenWidth: function () {

用style设置div的高度和宽度

Jannay的博客

09-09

2382

一、如果要使超出的内容被剪掉，那么： <div style="width:100px;height:100px;overflow-x:hidden;overflow-y:hidden;"> content<div> 二、如果不想被剪掉，那么： <div style="width:100px;height:100px;over...

VUE_vue动态绑定style属性

小歪博客

12-11

703

方式一：  <div :style="{ height: `${statusBarHeight}px`,background:'#fff' }"></div> export default { data() { return { statusBarHeight:100 } } } 方式二：  <div :style="{h

JS获取元素宽高的两种情况

weixin_30883271的博客

07-16

254

JS获取元素宽高分两种情况，一、内联样式，也就是直接把width和height写在HTML元素中的style里：　　这种情况使用 document.getElementById('xxx').style.width即可获取宽度（高度同理）二、写在CSS样式表中，这种情况使用document.getElementById('xxx').style.width是获取不到的　　...

【Vue】class和style的绑定

南栀的博客

02-10

859

文章目录classstyle 在vue中可以使用[v-bind]指令绑定class与style class 可以传给 v-bind:class 一个对象，以动态地切换 class <style> .divColor{ width: 100px; height: 100px; background-color: red; } </style> <div id="root" v-bind:class="{divCo

let can = document.createElement('canvas') can.width = 300 can.height = 350 var str1 = window.xyjVue.$waterStr; let cans = can.getContext('2d') cans.rotate(-25 * Math.PI / 180) const fontSize = 16; const opacity = 0.4; document.fonts.ready.then(() => { // 设置字体 const font = new FontFace('CustomFont', 'url(http://hnxyjwork.kmdns.net:15002/wenYi/DIN-Light.woff)'); font.load().then(() => { cans.fillStyle = `rgba(216, 216, 216, ${opacity})`; // 设置文本颜色和透明度 cans.font = `16px CustomFont`;// 设置字体大小和名称 cans.fillText(str1, 0, 300) cans.fillText(str1, 0, 130) let div = document.createElement('div') div.id = id div.style.pointerEvents = 'none' div.style.top = '0' div.style.left = '0' div.style.right = '0' div.style.bottom = '0' div.style.opacity = '1' div.style.position = 'absolute' div.style.zIndex = 7 div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat fixed' let img = new Image(); img.src = can.toDataURL('image/png'); img.onload = function () { div.style.background = `url(${img.src}) left top repeat fixed`; if (parentName) { document.querySelector(parentName).appendChild(div); } else { document.body.appendChild(div); } }; }); });字体文件虽然引入了但是页面并不生效

06-08

这个问题可能是由于字体文件加载时还未完成，就已经开始绘制文字导致的。你可以尝试在字体文件加载完成后再进行绘制，或者在绘制之前先判断字体文件是否已经加载完成。你可以修改代码如下： ``` let can = document.createElement('canvas'); can.width = 300; can.height = 350; var str1 = window.xyjVue.$waterStr; let cans = can.getContext('2d'); cans.rotate(-25 * Math.PI / 180); const fontSize = 16; const opacity = 0.4; // 设置字体 const font = new FontFace('CustomFont', 'url(http://hnxyjwork.kmdns.net:15002/wenYi/DIN-Light.woff)'); font.load().then(() => { document.fonts.add(font); // 添加字体 cans.fillStyle = `rgba(216, 216, 216, ${opacity})`; // 设置文本颜色和透明度 cans.font = `${fontSize}px CustomFont`; // 设置字体大小和名称 cans.fillText(str1, 0, 300); cans.fillText(str1, 0, 130); let div = document.createElement('div'); div.id = id; div.style.pointerEvents = 'none'; div.style.top = '0'; div.style.left = '0'; div.style.right = '0'; div.style.bottom = '0'; div.style.opacity = '1'; div.style.position = 'absolute'; div.style.zIndex = 7; div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat fixed'; let img = new Image(); img.src = can.toDataURL('image/png'); img.onload = function () { div.style.background = `url(${img.src}) left top repeat fixed`; if (parentName) { document.querySelector(parentName).appendChild(div); } else { document.body.appendChild(div); } }; }); ``` 这样就可以在字体加载完成后再进行绘制，确保绘制出的文字使用的是正确的字体。